css魔法系列(1)

原创 雨花茶 随笔 css 386阅读 2017-05-18 13:07:20 举报

以后每天更新一节css魔法系列文章,主要是css3的应用。请大家多多支持,多转载。有问题请在下方留言。
1.半透明边框
如何给一个白色背景的容器设置一个半透明的边框,也许你会这样写代码:
border: 10px solid hsla(0,0%,100%,.5);//变透明的边框
background: white;
但是实际上和你想象的不一样。边框怎么消失了。

css魔法系列(1)
怎么解决这个问题呢?我们可以借助background-clip这个属性。
说这个属性之前用到了盒模型;盒模型包含了4部分 content padding border margin

盒模型
这个属性有3个可选值:padding-box border-box content-box
border-box:背景从border开始渲染。默认是从border开始的
padding-box:背景从padding开始渲染
content-box:背景从content开始渲染
这也就是为什么写了半透明的边框,但是渲染的时候发现边框不见了,其实不是不见了而是被背景遮住了,恰巧背景色是白色所以我们看不见了。
我们可以用background-clip:padding-box;来改变背景渲染让border暴露出来。为了更好理解这个属性我们最后是在浏览器下看效果。

html 代码

评论 ( 2 )
最新评论
雨花茶 1F 2017-05-24 09:01:37 2F

不是的,他呈现出的样式,取决于背景色

452215551 2017-05-22 19:48:08 1F

我就想问一个问题 白色的透明 是不是白色