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实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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 验证码制作(网树注释思想)
2009/07/20 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP基本语法总结
2014/09/06 PHP
php格式化时间戳
2016/12/17 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
Vue中图片Src使用变量的方法
2019/10/30 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
小学生美德少年事迹
2014/02/02 职场文书
模范班主任事迹材料
2014/12/17 职场文书
优秀大学生申请书
2019/06/24 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Golang 入门 之url 包
2022/05/04 Golang