CSS 有趣的边框

简介:

今天看到一篇文章,是利用CSS边框来做折纸效果,感觉很有意思,于是就对CSS的border研究了一下,发现还真有一些好玩的用法。

1.border折纸效果

首先是HTML代码,为了简单,就一个div:

<div class="note">
	折纸效果
</div>
然后我们为它加上边框效果:

.note{
	display:block; 
	margin:100px auto;
	width:100px;
	height:100px;
	background:#ff0;
	border:1px solid #000;
}
这是最简单最丑的边框效果了,看起来像这样:

果然边框太细了看不到细节,我们把边框设粗一点,然后把每个方向的边框颜色改一下:

.note{
	display:block; 
	margin:100px auto;
	width:100px;
	height:100px;
	background:#ff0;
	border-width:10px 10px 10px 10px;
	border-color:#aa0 #f0f #512 #a21;
	border-style:solid;
}
效果如下:



瞬间产生3D效果了有木有!我们继续把边框设粗,然后把容器的height设为0:

.note{
	display:block; 
	margin:100px auto;
	width:100px;
	height:0px;
	background:#ff0;
	border-width:50px;
	border-color:#aa0 #a21 #740 #a21;
	border-style:solid;
}

瞬间产生信封的效果了有木有!我们继续把width也设为0,效果像这样(代码就不贴了):


是不是有一种金字塔的感觉呢!好了,就玩到这里,之前说了做折纸效果,现在想想应该是SO EASY了,先看效果图:


note还是原来的note,只是给note加了一个before伪元素,设置伪元素宽度为0,内容为空,利用边框做出三角形效果,然后通过绝对定位到右上角,最后加上阴影效果就ok啦。代码如下:

.note{
	display:block; 
	margin:100px auto;
	width:100px;
	height:100px;
	background:#ff0;
	padding:50px;
	position:relative;
}
.note:before{
	content:"";
	width:0;
	border-color:#fff #fff transparent transparent;
	border-style:solid;
	border-width:20px;
	position:absolute;
	top:0;
	right:0;
	
	-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
	-moz-box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
        box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
}
原来的HTML代码完全没变,只是更改了CSS样式而已,完全不影响语义化。

另附上CSS 中 border的属性:


另外,border-style本身也有支持3D效果的属性,以下是border-style的可选值:


2.升级到CSS3

CSS3中增加了图片边框border-image,圆角border-raduis,多颜色边框border-color。圆角用的比较多,多颜色边框可以做到边框颜色渐变效果(目前只有FF30支持,兼容性不好),border-image效果很赞,能九宫格切分图片,做到边框尺寸自适应,学习参考: http://www.w3school.com.cn/cssref/pr_border-image.asp

总结:平时布局的时候都有一个常用的写法,但是还有很多属性值我们没有用到,去发掘一下的话可能会有意想不到的惊喜!大家要是还有边框的有趣玩法,欢迎分享~~


相关文章
|
5天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1134 2
|
4天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
662 11
|
14天前
|
人工智能 运维 安全
|
5天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
317 0
|
12天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
832 23
|
5天前
|
缓存 供应链 监控
VVIC seller_search 排行榜搜索接口深度分析及 Python 实现
VVIC搜款网seller_search接口提供服装批发市场的商品及商家排行榜数据,涵盖热销榜、销量排名、类目趋势等,支持多维度筛选与数据分析,助力选品决策、竞品分析与市场预测,为服装供应链提供有力数据支撑。