-
边框圆角的作用：将原始的直角变为圆角
* 格式:border-radius: 100px 0px 0px 0px;; 按照左上/右上/右下/左下的顺序 * 格式:border-radius: 100px 80px 40px; 按照左上/右上和左下/右下的顺序 * 格式:border-radius: 100px 40px; 按照左上/右下和右上和左下的顺序 * 格式:border-radius: 100px ; 如果省略三个参数, 其它角会和它一样 * 格式:border-radius: 50% ; 如果指定的半径是当前元素宽高的一半, 那么就是一个圆形 -
单独绘制指定圆角和椭圆
单独指定某一个角的半径 border-top-left-radius:100px; border-top-right-radius:100px; border-bottom-left-radius:100px; border-bottom-right-radius:100px;如果传递了两个参数, 那么第一个参数代表水平方向的半径, 第二个参数代表垂直方向的半径 border-top-left-radius:100px 50px; border-top-right-radius:100px 50px; border-bottom-left-radius:100px 50px; border-bottom-right-radius:100px 50px;每条边都设置50%就是一个圆形 border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:50%; 简写：border-radius:50%;斜杠之前的代表左上/右上/右下/左下的水平方向的半径 斜杠之后的代表左上/右上/右下/左下的垂直方向的半径 border-radius:100px 100px 100px 100px/50px 50px 50px 50px; border-radius:100px/50px;
- 绘制半圆
-
如果边框的宽度小于圆角的半径, 那么内圆和外圆都是圆弧形状
如果边框的宽度大于或者等于圆角的半径, 那么内圆就会变成直角而不是圆角margin: 100px auto; width: 200px; height: 200px; border:100px solid #000; border-radius: 110px;
网友评论