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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
DOM 基本方法
2009/07/18 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
在Python中使用模块的教程
2015/04/27 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python实现简易淘宝购物
2019/11/22 Python
python numpy数组中的复制知识解析
2020/02/03 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
医院后勤自我鉴定
2013/10/13 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
2014年个人年终总结
2015/03/09 职场文书
在职证明书模板
2015/06/15 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS