loading

Loading

emlog模版 mongo python 测试 mongodb 同步 备份 大小写 导航模版 开源 数学 数据安全 数据库 日志 服务器 概率 测试速度 清华 百科全书 社区模版
首页 开发与编程

半透明边框与background-clip

戴墨镜的刘备 戴墨镜的刘备
分类：开发与编程
字数: (841)
阅读: (5632)
1
摘要：假设我们想给一个 div 设置一层白色背景和一道半透明白色边框， body的背景会从它的半透明边框中透上来，这要怎么解决呢？

假设我们想给一个 div 设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框中透上来。

效果如图：

点击查看原图

我们一开始的尝试可能是这样的：

background: #fff;
border: 50px solid rgba(255, 255, 255, .5);

写完后，一看浏览器，怎么回事？我的边框呢？

点击查看原图

这个结果可能会令你摸不着头脑，要是使用半透明颜色都实现不了半透明边框，那还有什么办法呢？

原因

尽管现在看起来像没有边框，但那 50px 的边框是实际存在的。因为默认情况下，背景是会延伸到边框的外沿，且处于边框的下层。我们来验证一下：

将边框改变颜色，并设置为虚线：

border: 50px dotted #000;

点击查看原图

我们发现，白色背景位于黑色边框的下面，知道这个原因之后，我们就可以想到，如果将背景裁切到边框的内沿就可以实现我们要的效果了。

幸好 CSS 有这个属性 background-clip。

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。

语法

background-clip: border-box
background-clip: padding-box
background-clip: content-box
background-clip: inherit

值

  • border-box
    背景延伸到边框外沿（但是在边框之下）。

  • padding-box
    边框下面没有背景，即背景延伸到内边距外沿。

  • content-box
    背景裁剪到内容区 (content-box) 外沿。

---摘自 MDN

于是我们设置 background-clip: padding-box; 即可，最后的代码：

border: 50px solid rgba(255,255,255, .5);
background-color: #fff;
background-clip: padding-box;

点击查看原图

本文发布于2017年08月10日11:26，已经过了2815天，若内容或图片失效，请留言反馈

转载请注明出处: 皮哈皮阿

本文的链接地址: https://blog.phpat.com/dev/454.html

扫描二维码，在手机上阅读
css
jquery中的map与原生js的map的区别 emlog主题模板 beginning 更新至v2.6.1
您可能对以下文章感兴趣
评论列表：
评论本文(2)
undefined
回复
子古月恒

2018-01-17 11:41

子恒
回复
@undefined：哈哈

2018-01-18 11:32

本站模版是基于emlog的Beginning-Pro，这是一款自适应的简洁、灵活、响应式的博客模板，非常适合个人自媒体博客、资讯网站、资源分享等多种场景。
冀ICP备2023024430号-1 11011402053654 京公网安备11011402053654
sitemap