Question

这种风格在边框外侧给出了平滑边角的边框，但是角落的内部是平方的，我可以将它们弄圆吗？

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

border:white solid 8px;
}

enter image description here 请注意，问题仅在于图像提交的建议仅适用于div。

Answer 1

您可以使用border-radius值作为border-size值的两倍来获得内圆角。

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

border:white solid 8px;

Answer 2

您必须设置高于边框宽度的border-radius-value。看看this jsfiddle。

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

Answer 3

这种技术需要将图像包装在div中，因为 - 我不知道为什么 - 在Safari中，psuedo-elements似乎不会为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以及top伪元素的left，right，bottom和:before位置需要是包装元素边界半径的一半。

http://jsfiddle.net/nvG5S/

Answer 4

如果减小边框的粗细将获得预期结果，或增加角落。

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

border:#000 solid 4px;

Example

Answer 5

您可以使用子元素的第二个边框来模仿边框内部

<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>

CSS - 边框半径和实心边框内侧弯曲

5 个答案: