边界半径不等

Question

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

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

Answer 1

#border {
  width: 300px;
  height: 500px;
  border: solid 1px #333;
  border-radius: 150px/30px;
}

<div id="border">

</div>

您可以通过在border-radius值之间添加斜杠“/”来创建椭圆边框：

border-radius: 150px/30px;

Answer 2

是的，您可以分别使用两个值，例如

border-top-left-radius: 80px 35px;
border-top-right-radius: 80px 35px;

这是一个代码显示与这些设置相似的DIV：

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

Answer 3

解决方案

border-top-left-radius

您可以按角指定半径

docs

Answer 4

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