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 27 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 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 MySQL与分页效率
2008/06/04 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
javascript window对象属性整理
2009/10/24 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
JavaScript实现换肤功能
2017/09/15 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
python进程类subprocess的一些操作方法例子
2014/11/22 Python
python多进程实现进程间通信实例
2017/11/24 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
煤矿百日安全活动总结
2015/05/07 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL