Fatal编程技术网
  • css/
  • CSS-边框半径和内部弯曲的实体边框

CSS-边框半径和内部弯曲的实体边框

css

CSS-边框半径和内部弯曲的实体边框,css,Css,这种样式的边框在边框的外侧有平滑的角，但角的内侧是方形的，我能把它们也做成圆形吗 img{ -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:white solid 8px; } 请注意，问题仅存在于提交的建议仅适用于div的图像。您可以使用边框半径值作为边框大小值的两倍来获得内部圆角 -webkit-border-radius: 16px; -moz-border-radius:

这种样式的边框在边框的外侧有平滑的角，但角的内侧是方形的，我能把它们也做成圆形吗

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

border:white solid 8px;
}
请注意，问题仅存在于提交的建议仅适用于div的图像。

您可以使用边框半径值作为边框大小值的两倍来获得内部圆角

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

border:white solid 8px;
如果减少边框的厚度，将获得预期的结果，或者增加角点

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

border:#000 solid 4px;

您必须设置一个高于边框宽度的边框半径值。看一看

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

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


身体{
背景#f0f5f9；
}
.境外边界{
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
边框：白色固体8px；
背景色：白色；
}
.内部边界{
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
背景：#7bada4；
}
内容
这项技术要求将图像包装在一个div中，因为在Safari中，psuedo元素似乎不会为
img
元素渲染，我不知道为什么

HTML

：before
psuedo元素位于图像的顶部，其内曲线边框基本上模拟图像上的内曲线边框。这是一个很好的解决办法，可以实现你想要的弯曲的内边界

包装和图像的
边框宽度
，
顶部
，
左侧
，
右侧
和
底部
位置：在之前的伪元素需要是包装元素边框半径的一半

您需要提供HTML和完整的CSS语句。这里没有足够的钱继续下去。“角落的内部”是什么意思？子元素？我添加了一个屏幕截图，它是在应用于图像时出现的。这里缺少的关键信息可能是边界厚度的重复。该解决方案在safariWell中不起作用，有很好的支持，也有很好的支持，所以是的。已经在chrome、safari和firefox中进行了尝试，并在这些方面发挥了作用。当然，它也适用于IE，但你需要进行测试。 
<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>

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

.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; 
}