阅读 99

CSS圆角边框

  • 在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角 语法:

border-radius:length;
复制代码

radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果

image.png

  • 参数值可以为数值或百分比的形式
  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
  • 如果是个矩形,设置为高度的一半就可以做类似下图

image.png

  • 该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角
  • 分开写:border-top-left-radius、border-top-right-radius、border-bottom-left-radius、order-bottom-right-radius、

image.png

文章分类
前端
文章标签