本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来CSS3做出多样边框特效,CSS3做出多样边框特效的注意事项有哪些,下面就是实战案例,一起来看一下。半透明边框
实现效果:
实现代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
实现要点:
设置边框为半透明,这是还看不到半透明边框,因为默认情况下,背景会延伸到边框所在的区域下层,也就是背景是被边框的外沿框裁切掉。
通过设置 background-clip: padding-box (初始值是 border-box) 让背景不要延伸到边框所在的区域下层,也就是让内边距的外沿来裁切背景。
多重边框
实现效果:
实现代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
实现要点:
box-shadow 实现方案使用的是 box-shadow 的第四个参数(扩张半径)。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的“投影”其实就像一道实线边框。而借助 box-shadow 支持逗号分割语法,可创建任意数量的投影,因此我们就可实现多重边框效果。
border/outline 实现方案是使用 border 设置一层边框,再使用outline 设置一层边框。这个方案可实现虚线边框,但它只能实现两层边框。
边框内圆角
实现效果:
实现代码:
1 2 3 4 5 6 7 8 9 10 11 |
|
实现要点:
outline 不会跟着元素的圆角走(因而显示出直角),但 box-shadow 确实会的,因此,将两者叠加到一起,box-shadow(其扩张值大概等于 border-radius 值的一半) 会刚好填补 outline 和容器圆角之间的空隙,因此可达到我们想要的效果。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Vue.js开发mpvue框架步骤详解
jquery fullpage插件添加头部与尾部版权相关
相关阅读 >>
更多相关阅读请进入《CSS3》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者