CSS3边框圆角实现_html/css_WEB-ITnose

语法

border-radius:length|percentage {1,4} 

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; 

兼容性

例子

##效果图;

#代码

         CSS圆角实现     /* 方块样式定义 正方形要产生圆形:半径等于宽或高(border+padding+content)的一半 要注意块的总大小 = border(around)+padding(around)+content(around)+margin(around) */ div { width: 150px; height: 150px; background: #000000; padding: 50px; margin: 50px; } div p { text-align: center; color: #5b90e7; font-size: 15px; font-weight: 700; line-height: 20px; } span{display:inline-block;} ul { padding: 0; margin: 0; list-style: none; display: inline-block; } ul li { float: left; } /* 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

      
查看更多关于CSS3边框圆角实现_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108021