Question

是否可以仅为顶部设置椭圆效果？

通过此网站https://css-tricks.com/almanac/properties/b/border-radius/，我想复制使用＆＃39; /＆＃39;完成的效果。

border-radius: 30px/10px;

除非我不能使效果仅适用于右上角和左上角。这是否可以使用border-radius？

＆＃13;

.border-radius {
  width: 100px;
  height: 100px;
  background-color: tomato;
  border-radius: 30px/10px;
}

＆＃13;

<div class="border-radius"></div>

＆＃13;

Answer 1

当然，为什么不呢？可以为每个角定义border-radius; 更多信息 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F72F4E;
  overflow: hidden;
}


.Box {
  width: 50vmin;
  height: 50vmin;
  position: relative;
  background: rgba(0,0,0,.2);
  border-top-left-radius: 0;
  border-top-right-radius: 30px 10px;
  border-bottom-right-radius: 30px 10px;
  border-bottom-left-radius: 30px 10px;
}

<div class="Box"></div>

Answer 2

如何将效果仅应用于右上角和右下角

根据Borders Module Level 3 - Border-radius，简写语法为：

var elems = $('.content').find('div').filter(function() { return $(this).text() == 0 });

值的顺序是左上角，右上角，右下角，左下角。因此，如果您只想将其应用于右上角和右下角，则可以使用值[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?。

您也可以在所有边上设置0 30px 30px 30px/0 10px 10px 10px的边框半径，然后覆盖左上角：

30px/10px

＆＃13;

border-radius: 30px/10px;
border-top-left-radius: 0;

＆＃13;

.border-radius {
  width: 100px;
  height: 100px;
  background-color: tomato;
  border-radius: 0 30px 30px 30px/0 10px 10px 10px;
}

＆＃13;

同样，<div class="border-radius"></div>的值仅适用于顶部：

＆＃13;

30px 30px 0 0/10px 10px 0 0

＆＃13;

.border-radius {
  width: 100px;
  height: 100px;
  background-color: tomato;
  border-radius: 30px 30px 0 0/10px 10px 0 0;
}

＆＃13;

Answer 3

您可以使用border-top-right-radius和border-bottom-right-radius：

width: 100px;
height: 100px;
background: red;
border-top-right-radius: 20px 50px;
border-bottom-right-radius: 20px 50px;

jsFiddle：http://jsfiddle.net/jacquesc/L1zz0an3/2/

仅在顶部应用椭圆边框效果

3 个答案: