CSS 如何实现半透明边框与多重边框效果? 本篇文章分两种场景给大家介绍 CSS 实现半透明边框与多重边框效果. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
场景一:
实现半透明边框:
由于 CSS 样式的默认行为, 背景色的渲染范围是 content+padding+border.
半透明边框被主调色影响, 实现的效果为
解决方案:
使用 background-clip 属性规定背景的绘制区域, 使得绘制区域仅限制在 content+padding.
- p {
- border:10px solid rgba(0,0,0,.5);
- background: lightblue;
- background-clip: padding-box;
- }
补充: background-clip 不兼容 IE6-8, Opera10
场景二:
实现多重边框:
方案 1: 使用 box-shadow 来生成多重投影
代码与效果如下:
- p {
- background:#c3e6f4;
- box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
- }
方案 2: 盒子边框结合描边属性 (outline)
特点: 只能实现两重边框, 更加灵活, 能使用虚线等效果
代码与效果如下:
- p {
- border: 6px dashed #c3f4ec;
- outline: 10px solid #d9faf6;
- background-clip: padding-box;
- }
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17535.html