欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3边框圆角实现方法

程序员文章站 2022-06-17 16:07:12
...

语法
border-radius:length|percentage {1,4}
1
length : 用长度值设置对象的圆角半径长度。不允许负值
percentage : 用百分比设置对象的圆角半径长度。不允许负值
{1,4}是说该属性支持1~4参数值;
参数解释
一个参数:
所有半径相等,顺时针,自左上角到左下角
两个参数:对角相等.

第一个参数:左上角=右下角;
第二个参数:右上角=左下角
三个参数.

第一个参数:左上角;
第二个参数:右上角=左下角;
第三个参数:右下角
四个参数:

自左上角到左下角,顺时针
浏览器前缀
Mozilla(Firefox, Flock等浏览器) : -moz-
WebKit (Safari, Chrome等浏览器) : -webkit-
Opera浏览器:-o-
Trident (IE) :-ms-
一般的写法私有前缀在前,默认属性在后,因为页面解析自上而下

-moz-border-radius : 10px;
-webkit-border-radius : 10px;
-o-border-radius : 10px;
-ms-border-radius : 10px;
border-radius : 10px;

兼容性
CSS3边框圆角实现方法

例子
##效果图;
CSS3边框圆角实现方法

#代码

CSS圆角实现

border-radius
*/

ul .T11 {
  border-top-left-radius: 125px;
}

ul .T22 {
  border-top-right-radius: 125px;
}

ul .T33 {
  border-bottom-right-radius: 125px;
}

ul .T44 {
  border-bottom-left-radius: 125px
}

ul .T1 {
  border-radius: 125px
}

ul .T2 {
  border-radius: 125px 60px;
}

ul .T3 {
  border-radius: 125px 90px 45px
}

ul .T4 {
  border-radius: 125px 90px 45px 20px;
}
  • border-top-left-radius:125px

  • border-top-right-radius:125px

  • border-bottom-right-radius:125px

  • border-bottom-left-radius:125px

精确到每个部位的角度写法
  • 一个参数:所有半径相等

    border-radius:125px
  • 两个参数:对角相等.第一个参数:左上角=右下角;第二个参数:右上角=左下角

    border-radius:125px 60px;

  • 三个参数.第一个参数:左上角;第二个参数:右上角=左下角;第三个参数:右下角

    border-radius:125px 90px 45px

  • 四个参数:自左上角到左下角,顺时针

    border-radius:125px 90px 45px 20px;

精确到每个部位的角度缩写 ———————————————— 版权声明:本文为CSDN博主「crper」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/crper/article/details/45748519
相关标签: 前端 css3