介绍 div {
边界:10 px solid rgba (0, 0, 0, 0。5);
背景:,lightblue;
background-clip: padding-box;
} div {
背景:# c3e6f4;
不必:0,0,0,15 px # b7dae6, 0, 0, 0, 30 px # cce2ea;
} div {
边界:6 px dashed # c3f4ec;
大纲:10 px solid # d9faf6;
background-clip: padding-box;
}
这篇文章给大家分享的是有关CSS如何实现半透明边框与多重边框效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
CSS实现半透明边框与多重边框效果。
<>强场景一:
实现半透明边框:
由于CSS样式的默认行为,背景色的渲染范围是内容+填充+边界。
半透明边框被主调色影响,实现的效果为
<强>解决方案:
使用background-clip属性规定背景的绘制区域,使得绘制区域仅限制在内容+填充。
补充:background-clip不兼容IE6-8, Opera10
<>强场景二:
实现多重边框:
方案1:使用不必来生成多重投影
代码与效果如下:
方案2:盒子边框结合描边属性(大纲)
特点:只能实现两重边框,更加灵活,能使用虚线等效果
代码与效果如下:
感谢各位的阅读!关于“CSS如何实现半透明边框与多重边框效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
