CSS3圆角详解

圆角 border-radius属性

border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

4个圆角(border-radius: 20px;

水平圆角:(border-radius: 25px 5px;):

垂直圆角( border-radius: 5px 25px;):

(border-radius: 15px 5px 25px;):

(border-radius: 15px 5px 25px 0px;):

扫描二维码关注公众号,回复: 2538407 查看本文章

单个圆角的设置:

       border-top-left-radius
  border-top-right-radius
  border-bottom-right-radius
     border-bottom-left-radius

猜你喜欢

转载自blog.csdn.net/weixin_42659625/article/details/81085841
今日推荐