CSS3 的插入边框半径
在 CSS3 中，实现插入边框半径（其中角向内而不是向外弯曲）可以不使用图像也具有挑战性。然而，有一个巧妙的解决方案，利用 CSS3 渐变。
Lea Verou 巧妙的方法涉及创建一系列带有曲线的透明渐变，从而创建内嵌边框半径的错觉。通过精确定位这些渐变，您可以实现所需的圆角效果。
她的 CSS 代码如下所示，为具有所需插入边框半径的元素定义了一个自定义类：
div.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}将此类应用于元素将产生具有内嵌边框半径的元素。值得注意的是，该技术依赖于 rgba 和渐变的支持，使其成为一种渐进增强策略。对于较旧的浏览器或不支持渐变的浏览器，建议使用基于图像的后备来提供支持。
以上是如何仅使用 CSS3 创建内嵌边框半径？的详细内容。更多信息请关注PHP中文网其他相关文章！
