border-radius 使用之左上、左下、右上、右下分别定义

2020-11-18T14:00:00

border-radius 字面意思就是边框的半径长度,即定义元素四个角的设置圆角边框。一般情况下,会直接定义 border-radius 的值。跟其他属性如 margin 、padding 之类一样,border-radius 其实也可以定义四个值,分别表示左上角,右上角,右下角,左下角的圆角半径。

border-radius: 2rem;

等价于

border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

这种可以定义组合按钮,比如左右两个按钮,可以设置左侧按钮的左上、左下和右侧按钮的右上、右下,这样组合起来合适(见淘宝的加入购物车和立即购买按钮)。

甚至还可以定义八个值(分别表示):

border-radius:1rem / 2rem;

等价于

border-top-left-radius: 1em 2em;
border-top-right-radius: 1em 2em;
border-bottom-right-radius: 1em 2em;
border-bottom-left-radius: 1em 2em;

这样可以定义更加细致、特别的圆角。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »