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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 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
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php 保留字列表
2012/10/04 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php遍历目录方法小结
2015/03/10 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jquery使用经验小结
2015/05/20 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue源码中的检测方法的实现
2019/09/26 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
python可以用哪些数据库
2020/06/22 Python
Python连接mysql方法及常用参数
2020/09/01 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
南京某公司笔试题
2013/01/27 面试题
团员的自我评价
2013/12/01 职场文书
品质标语大全
2014/06/21 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
环保建议书范文
2015/09/14 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
标准发言稿结尾
2019/07/18 职场文书
创业计划书之废品回收
2019/09/26 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL