css 半透明

本文分为两个场景，介绍CSS实现半透明边框和多边框效果。有一定的参考价值，有需要的朋友可以参考，希望对大家有所帮助。

(学习视频分享:css视频教程)

场景一：

实现半透明边框：

由于CSS风格的默认行为，背景色的渲染范围是 content padding border。

主色调影响半透明边框， 实现的效果是

解决方案：

使用backrond-clip 属性规定背景的绘制区域，使绘制区域仅限于content padding。

div {
border:10px solid rgba(0、0、0、0、;
background: lightblue;
background-clip: padding-box;
}

补充： background-clip IE6-8不兼容， Opera10

场景二：

实现多个边框：

方案1： 使用box-shadow生成多重投影

代码及效果如下：

div {
background:#c3e6f4;
box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}

方案2：盒子的边框与边缘属性相结合(outline)

特点： 只能实现两个边框，更灵活，可以使用虚线等效果

代码及效果如下：

div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
}

更多编程相关知识，请访问：编程视频！！

以上是使用CSS实现半透明边框和多边框效果的详细内容。更多请关注AdminJS的其他相关文章！