CSS: border-radius绘制椭圆

前言

设计稿中会有一些上圆弧或下圆弧的样式，需要通过border-radius试一试能不能到达我们想要的效果。

开始

一般设计师会标注椭圆的宽（一般都是大于屏幕的）高。圆弧是居中的。例如：

实践

语法描述： border-radius: 1-4 length|% / 1-4 length|%;

一般写法： border-radius: 50%;

等价于： border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; （左上，右上，右下，左下）

"/"之前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。

看一个例子吧

HTML:

<div class="test">
    绘制一个椭圆
</div>

CSS:

.test{
    width: 200px;
    height: 80px;
    background: pink;
    border-radius: 50%;
    /* 或者 */
    border-radius: 100px/40px;
}

了解更多：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

https://www.cnblogs.com/happymental/p/7891725.html

总结

大家在实际工作中，或者实践中遇到什么问题。可以评论交流，有更好的想法大家一起分享~

如果你有什么疑问或想法，欢迎留言评论，或者扫描下方二维码，与我取得联系~