css3 border-radius属性值你到底知道多少?


摘要:
下文采用举例的方式讲述css3中border-radius属性值功能说明,如下所示:


css3 border-radius属性值功能说明

设置指定的html元素的圆角半径长度,此参数值不允许为负值

css3 border-radius属性值语法:
  border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
-----------------------参数说明---------------------
 <length>:
用长度值设置对象的圆角半径长度。不允许负值
<percentage>:
用百分比设置对象的圆角半径长度。不允许负值
border-radius说明
   1.border-radius是一个css3属性

   2.border-radius后面可两个参数,每个参数之间可使用斜杠分隔,
     每个参数可输入1~4个参数值
       参数1:表示水平半径
       参数2:表示垂直半径---当未输入"参数2"时,则参数2默认使用参数1的值
     
   3.每个参数中的 1~4个参数值分别为:
      输入四个参数值:上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left) 四个角
      输入两个参数值:第一个参数值代表---上左(top-left)、下右(bottom-right),第二个参数值代表----上右(top-right)、下左(bottom-left)
      输入三个参数值:第一个参数值代表---上左(top-left),第二个参数值代表----上右(top-right)、下左(bottom-left),第三个参数值代表下右(bottom-right)
     
   4.使用js对象操作此属性其属性名为: borderRadius  

css3 border-radius属性值 举例说明

<meta charset="utf-8" />
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.class1 .one{border-radius:10px;}
.class1 .two{border-radius:10px 20px;}
.class1 .three{border-radius:10px 20px 30px;}
.class1 .four{border-radius:10px 20px 30px 40px;}
.class2 .one{border-radius:10px/5px;}
.class2 .two{border-radius:10px 20px/5px 10px;}
.class2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.class2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
<p>
 maomao365.com <br />
 css3 border-radius示例说明
</p>
<hr />

<ul class="class1">
	<li class="one">提供1个参数<br />border-radius:10px;</li>
	<li class="two">提供2个参数<br />border-radius:10px 20px;</li>
	<li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
	<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时:</h2>
<ul class="test2">
	<li class="one">提供1个参数<br />border-radius:10px/5px;</li>
	<li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
	<li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
	<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
css  border-radius属性值说明

css
border-radius属性值说明