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媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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
基于文本的访客签到簿
2006/10/09 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
DOM 中的事件处理介绍
2012/01/18 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
python中关于for循环的碎碎念
2017/06/30 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
python实现梯度法 python最速下降法
2020/03/24 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python实现播放和录制声音的功能
2020/08/12 Python
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
C#基础面试题
2016/10/17 面试题
与UNIX有关的几个名词
2015/09/17 面试题
园林技术个人的自我评价
2014/01/08 职场文书
大学生就业求职信
2014/06/12 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
小平小道观后感
2015/06/09 职场文书
体育教师研修感悟
2015/11/18 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python