html – 外面的透明边框半径

概述我需要一些帮助,我有一个带有border-radius的div,我需要它在circle div之外是透明的.我尝试过：之后和大纲.随着“：after”边界留在div中并且有了轮廓,我无法将其四舍五入. 有人知道答案吗 ？ CSS： div.circle { background: black; width: 5em; height: 5em; 我需要一些帮助,我有一个带有border-radius的div,我需要它在circle div之外是透明的.我尝试过：之后和大纲.随着“：after”边界留在div中并且有了轮廓,我无法将其四舍五入.

有人知道答案吗 ？

CSS：

div.circle {        background: black;        wIDth: 5em;        height: 5em;        -moz-border-radius: 2.5em;        -webkit-border-radius: 2.5em;        border-radius: 2.5em;    }   div.circle p {        padding: 2em 2em 0 2em;        color: white;    }    div.circle:after {        content:'';        display: block;        position: absolute;        top: 0;        bottom: 0;        left: 0;        right: 0;        border-radius: 2.5em;        border: 4px solID rgba(255,255,0.51);    }

带有outline属性的CSS：

div.circle {     outline: 4px solID rgba(255,0.3);     background: black;     wIDth: 5em; height: 5em;     -moz-border-radius: 2.5em;     -webkit-border-radius: 2.5em;     border-radius: 2.5em;}

我想要的是：
http://giovannigras.be/home/img.png

解决方法 使用Box-shadow而不是border：

Box-shadow: 0 0 0 4px rgba(255,0.51);

导致透明边框将透明背景下方,
如果你在Box-shadow属性中使用spread值,那么你很高兴：

Example demo

另外,正如@vals所建议的那样,您可以使用background-clip将背景大小保留在内容框大小模型中,否则会进入默认边框.

文档：
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

总结

以上是内存溢出为你收集整理的html – 外面的透明边框半径全部内容，希望文章能够帮你解决html – 外面的透明边框半径所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。