是否有CSS3方式创建边框半径,如附加图像上的那个? Border Radius
当我使用border-radius时,它会将曲线应用于两侧。
答案 0 :(得分:2)
#border {
width: 300px;
height: 500px;
border: solid 1px #333;
border-radius: 150px/30px;
}
<div id="border">
</div>
您可以通过在border-radius值之间添加斜杠“/”来创建椭圆边框:
border-radius: 150px/30px;
答案 1 :(得分:1)
是的,您可以分别使用两个值,例如
border-top-left-radius: 80px 35px;
border-top-right-radius: 80px 35px;
这是一个代码显示与这些设置相似的DIV:
答案 2 :(得分:0)
答案 3 :(得分:0)
.radius {
background: #f0f0f0;
border: 1px solid black;
border-radius: 10em/1em;
padding: 0;
width: 200px;
height: 300px;
overflow: hidden;
}
.radius > img {
width: 100%;
max-width: 100%;
height: auto;
}
<div class="radius">
<img src="http://placehold.it/200x300&text=Image" alt="Image">
</div>