前言
设计稿中会有一些上圆弧或下圆弧的样式,需要通过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
总结
嘘寒问暖 不如打笔巨款~