css border-radius的使用

 时间:2026-02-16 03:07:59

1、border-radius 给元素添加圆角边框,这是一个简写属性,是border-top-right-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius简写的一个属性。

语法:

border-radius: 1-4 length | % / 1-4 length | % 1-4 length;

注:border-radius最多可以设置八个值,也可以只设置一个值,下面的设置都是有效的。

css border-radius的使用

css border-radius的使用

2、语法解释如下图:

border-radius是由border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius简写成的,这个四个属性分别对应元素的四个角,同时每个角有两个方向,所以border-radius最多可以取8个值。根据CSS的取值顺序‘top - right - bottom -left’。


设置一个值时,所有的值都相同;
设置两个值:top bottom相同,left right相同;
设置三个值:top (left right相同) bottom;
设置四个值:top left right bottom;
border-radius 中出现 ‘/’ 为 水平半径 / 垂直半径。

css border-radius的使用

css border-radius的使用

3、border-radius 是如何画圆角的

top-left为例,设置50px的圆角,是从元素top-left的顶点定义为(0,0)然后把圆心平移到(50,50)画圆,所得到的边框。如果top-left设置的值不同,同样平移到坐标点,则画椭圆。其他top-right、bottom-left、bottom-right同理。

css border-radius的使用

css border-radius的使用

4、border-radius 画圆

css border-radius的使用

5、border-radius 画椭圆

css border-radius的使用

6、border-radius 画鸡蛋

css border-radius的使用

  • 花亦山心之月中如何获得碧海八仙
  • 如何使用jquery实现淡入淡出效果
  • 艾尔多战记前中后期阵容选择
  • 怎么祛除痘坑
  • web图形报表软件FineReport中op参数的说明
  • 热门搜索
    tplink怎么改密码 qq相册怎么设置密码 日产骐达怎么样 奔驰e300怎么样 手机没信号怎么回事 怎么清理手机 购车分期付款怎么算 上海人怎么样 阳光财险怎么样 卫生许可证怎么办理