边界半径不等

时间:2016-05-09 21:10:40

标签: html css css3

是否有CSS3方式创建边框半径,如附加图像上的那个? Border Radius

当我使用border-radius时,它会将曲线应用于两侧。

4 个答案:

答案 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:

http://codepen.io/anon/pen/yOZrMr

答案 2 :(得分:0)

解决方案

border-top-left-radius

您可以按角指定半径

docs

答案 3 :(得分:0)

border-radius

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