CSS实现半透明边框与多重边框的场景分析


Posted in HTML / CSS onNovember 13, 2019

场景一:

实现半透明边框:

由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border。

半透明边框被主调色影响, 实现的效果为

CSS实现半透明边框与多重边框的场景分析CSS实现半透明边框与多重边框的场景分析

解决方案:

使用background-clip 属性规定背景的绘制区域,使得绘制区域仅限制在content+padding。

Div {
border:10px solid rgba(0,0,0,.5);
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;
}

CSS实现半透明边框与多重边框的场景分析

方案2:盒子边框结合描边属性(outline)

特点: 只能实现两重边框,更加灵活,能使用虚线等效果

代码与效果如下:

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

CSS实现半透明边框与多重边框的场景分析

总结

以上所述是小编给大家介绍的CSS实现半透明边框与多重边框的场景分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
css3高级选择器使用方法
Dec 02 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
CSS3 新增选择器的实例
Nov 13 #HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 #HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 #HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 #HTML / CSS
CSS3 边框效果
Nov 04 #HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 #HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 #HTML / CSS
You might like
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Python实现基本线性数据结构
2016/08/22 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python十进制转二进制的详解
2020/02/07 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
Linux机考试题
2015/07/17 面试题
财务副总经理工作职责
2013/11/25 职场文书
党员公开承诺书范文
2014/03/25 职场文书
大学生自我评价范文
2015/03/03 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python