logo标签列表

CSS - 圆角边框和内部弯曲的实心边框

css
12

这种样式在边框外部呈现圆角，但是角的内部是方形的，我能让它们也变成圆角吗？

img{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

border:white solid 8px;
}

enter image description here请注意，问题仅限于图片，提供的建议仅适用于div。

你需要提供HTML和完整的CSS语句。这里没有足够的信息。"角落的内部"是什么意思？子元素吗？ - isherwood
我已经添加了一张截图，它是应用于一张图片时的。 - Guesser
可能是重复的问题：如何使一个盒子的圆角同时应用于内部和边框？ - kei
你的边框厚度是这里缺失的关键信息。 - isherwood
该解决方案在Safari中不起作用。 - Guesser
5个回答
17

您可以使用边框大小的两倍作为border-radius值，以获得内部圆角。

-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;

border:white solid 8px;
5

您需要设置一个 比边框宽度更大的 border-radius 值。请参考这个 jsfiddle。

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
border:black solid 8px;
2

这种技术要求将图像包裹在一个 div 中，因为——我不确定为什么——在 Safari 中，伪元素似乎无法渲染 img 元素。

HTML

<div class="box"><img src="http://placehold.it/200x200/" /></div>

CSS

.box { 
    display:inline-block; /* Makes the wrapper flush with the image */
    line-height: 0; /* Stops a gap appearing underneath image */
}
.box, .box:before { 
    border: 8px solid #fff; 
    border-radius: 16px; 
    position: relative; 
    z-index: 1; 
}
.box:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    top: -8px; 
    left: -8px; 
    right: -8px; 
    bottom: -8px; 
    z-index: 2; 
}
:before伪元素位于图像顶部，其内部曲线边框模拟了图像的内部曲线边框。这是一个相当不错的解决方法，可以实现所需的内部曲线边框。
包装器和图像的border-width以及:before伪元素的top、left、right和bottom位置需要是包装器元素边框半径的一半。 http://jsfiddle.net/nvG5S/
伪元素在大多数浏览器中都有很好的支持，而边框半径也有相当不错的支持，所以是的。我已经在Chrome、Safari和Firefox中尝试过，并且在这些浏览器中都可以正常工作。虽然在IE中也应该可以正常工作，但你需要进行测试。 - Josh Davenport-Smith
0
如果你减小边框的厚度，就会得到预期的结果，或者增加角落。
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

border:#000 solid 4px;

示例

0

你可以通过子元素的第二个边框来模拟内部边框

<style type="text/css">
body {
  background:#f0f5f9;
}
.border-outside{
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border:white solid 8px;
  background-color: white;
}
.border-inside {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #7bada4;  
}
</style>
<body>
<div class="border-outside">
<div class="border-inside">  
content
</div>
</div>
</body>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接