场景一:

实现半透明边框:

由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border。

半透明边框被主调色影响, 实现的效果为

 

解决方案:

使用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;
}

方案2:盒子边框结合描边属性(outline)

特点: 只能实现两重边框,更加灵活,能使用虚线等效果

代码与效果如下:

div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
}

CSS揭秘-半透明边框与多重边框的更多相关文章

  1. CSS3实现原腾讯视频透明边框,多重边框等(关于边框那些不为人知的事情)

    1.hsla或rgba实现半透明边框. rgba在rgb的基础上增加了透明通道,就不详细说了,下面重点说下hsla: 说明: HSLA(H,S,L,A) 取值: H:Hue(色调).0(或360)表示 ...

  2. 利用CSS3实现透明边框和多重边框

    使用background-clip属性实现透明边框 .bordertest { border: 30px solid hsla(0,0%,90%,.5); background: #bbb; back ...

  3. CSS揭秘之多重边框&连续的图像边框

    1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...

  4. [css 揭秘]:CSS揭秘 技巧(二):多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

  5. [css 揭秘]:CSS揭秘 技巧(一):半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  6. CSS揭秘—多重边框(二)

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

  7. [css]《css揭秘》学习(二)-多重边框

    一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...

  8. CSS揭秘—透明边框(一)

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

  9. 02--css背景与边框--css揭秘

    背景与边框 一 半透明边框 rgba/hsla颜色 1.难题 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来.我们最开始的尝试可能是这样的: #bo ...

随机推荐

  1. SaaS加速器 III 技术中心:提供SaaS Launchkit,快速定制,一云多端等能力,一云多端将通过小程序云实现

    https://yq.aliyun.com/articles/695746 演讲主题:SaaS加速器 III技术中心:聚合开放 高效强大 技术中心定义:阿里云以聚合开放的姿势,提供一个高效强大的技术开 ...

  2. JDOJ 1133 分段公司利润

    JDOJ 1133: 分段公司利润 JDOJ传送门 Description 企业发放的奖金根据利润提成.利润低于或等于100000元的,奖金可提10%; 利润高于100000元,低于200000元(1 ...

  3. html--前端css样式初识

    一.CSS概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用css. CS ...

  4. Win10解决修改host没有权限问题(其他文件同理) 一步都不能少哦:先添加再授权

    Step1:右键文件选择属性,选择安全,点击编辑: Step2:在弹窗中点击添加,在弹窗中点击高级: Step3:在弹窗中点击立即查找,选中当前用户,点击确定: Step4:此时选中用户已经被加入进来 ...

  5. python相对导包问题

    导包分为:绝对路径.相对路径 在测试时发现不能够使用相对路径 查过之后才知道: 运行模块(如:main.py)中导包只能使用绝对路径,不能使用相对路径 官方文档: Note that relative ...

  6. IE与标准浏览器对事件处理的区别?(监听、阻止冒泡、阻止默认等)

    谷歌 IE:监听:addEventListener   attachEvent--------要在事件名称前面加on解绑:removeEventListener      detachEvent--- ...

  7. Http 状态码(Status Codes)

    七.状态码(Status Codes)*服务器向用户返回的状态码和提示信息,常见的有以下一些(方括号中是该状态码对应的HTTP动词).200 OK - [GET]:服务器成功返回用户请求的数据,该操作 ...

  8. springboot2.x自定义拦截把static静态文件给拦截的坑

    新人新帖,喷后请指正,谢谢 1.王中王,坑中坑 和很多人一样,我在springboo自定义配置登录拦截的时候,写一个WebConfig类继承WebMvcConfigureAdapter,重写AddRe ...

  9. Spring Security教程之Jsp标签(八)

    目录 1.1     authorize 1.2     authentication 1.3     accesscontrollist Spring Security也有对Jsp标签的支持的标签库 ...

  10. DDD框架基础知识

    DDD框架基础知识 参考: https://www.cnblogs.com/zhili/p/OnlineStorewithDDD.html(领域驱动设计,分层架构) https://www.cnblo ...