美文网首页
半透明边框

半透明边框

作者: _菡曳_ | 来源:发表于2017-07-23 16:30 被阅读0次

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

border:10px solid hsla(0,0%,100%,.5);
background:white;
一开始尝试的结果

默认情况下,背景会延伸到边框所在区域的下层,所以我们所做的事情只是让自己的纯白色背景透了出来。

解决方案
从背景与边框(第三版)开始,我们可以使用background-clip属性来调整上述默认行为所带来的不便。这个属性的初始值是border-box,意味着背景会被元素的border box(边框的外沿框)裁切掉。如果不希望背景侵入边框所在的范围,我们要把值改为padding-box,这样浏览器就会用内边距的外沿来把背景裁切掉。

完美!

相关文章

  • 边框半透明

    边框半透明 给一个div设置半透明的边框 理想效果 body { background: rgba(129...

  • 《css-secrets》-demo:半透明边框

    《css-secrets》 半透明边框 关键字:半透明;边框;background-clip 需求描述 给一个容器...

  • CSS揭秘笔记(2):背景与边框

    第2章:背景与边框 1.半透明边框 背景知识:RGBA/HSLA颜色-给一个容器设置白色背景和一道半透明白色边框,...

  • 半透明边框

    一个难题假设想给一个容器设置一层白色背景和一道半透明边框,body的背景会从它的半透明边框透上来。最开始我们的尝试...

  • 半透明边框

    半透明颜色:rgba()、hsla() 代码: { border:10px dashed rgba(255,0,0...

  • 半透明边框&多重边框&背景定位

    半透明边框 半透明颜色的实现已经屡见不鲜,以往在css2,大家需要准备一张单像素的半透明图片,但是边框呢?所幸cs...

  • 背景与边框

    title: 背景与边框date: 2016-10-16tags: CSS Secrets 0x00 半透明边框 ...

  • CSS揭秘学习笔记

    第二章 背景与边框 半透明边框background-clip属性设置为padding-box可以使背景不侵入边框,...

  • CSS揭秘整理之半透明边框

    1.半透明边框 问题: 如果我们要为一个容器设置红色背景和一道黑色半透明边框,我们可能会这样写: 但是效果却是这样...

  • CSS的秘密!

    背景和边框 (1).半透明边框: rgba hlsa H:Hue(色调)。0(或360)表示红色,120表示绿色,...

网友评论

      本文标题:半透明边框

      本文链接:https://www.haomeiwen.com/subject/zksekxtx.html