html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

讲解CSS3中的border-radius属性_Div+Css教程

[ ] 已经帮助:人解决问题

   Border-radiuspjrHTML5中文学习网 - HTML5先行者学习网

  border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。pjrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板pjrHTML5中文学习网 - HTML5先行者学习网

  border-radius: 2em 1em 4em / 0.5em 3em;pjrHTML5中文学习网 - HTML5先行者学习网

  等价于:pjrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板pjrHTML5中文学习网 - HTML5先行者学习网

  border-top-left-radius: 2em 0.5em;pjrHTML5中文学习网 - HTML5先行者学习网

  border-top-rightright-radius: 1em 3em;pjrHTML5中文学习网 - HTML5先行者学习网

  border-bottom-rightright-radius: 4em 0.5em;pjrHTML5中文学习网 - HTML5先行者学习网

  border-bottom-left-radius: 1em 3em;pjrHTML5中文学习网 - HTML5先行者学习网

  如何使用border-radius属性pjrHTML5中文学习网 - HTML5先行者学习网

  下面是border-radius属性最基本的使用方法。pjrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板pjrHTML5中文学习网 - HTML5先行者学习网

  .round {pjrHTML5中文学习网 - HTML5先行者学习网

  border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */pjrHTML5中文学习网 - HTML5先行者学习网

  -moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */pjrHTML5中文学习网 - HTML5先行者学习网

  -webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */pjrHTML5中文学习网 - HTML5先行者学习网

  border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */pjrHTML5中文学习网 - HTML5先行者学习网

  }pjrHTML5中文学习网 - HTML5先行者学习网

  1.用border-radius画圆pjrHTML5中文学习网 - HTML5先行者学习网

  实心圆pjrHTML5中文学习网 - HTML5先行者学习网

2015818182257374.jpg (300×300)

  如图,是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等,并且把border的宽度设为高度和宽度的一半。代码如下。pjrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板pjrHTML5中文学习网 - HTML5先行者学习网

  #circle {pjrHTML5中文学习网 - HTML5先行者学习网

  width: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  height: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  background-color: #a72525;pjrHTML5中文学习网 - HTML5先行者学习网

  -webkit-border-radius: 100px;pjrHTML5中文学习网 - HTML5先行者学习网

  }pjrHTML5中文学习网 - HTML5先行者学习网

  空心圆pjrHTML5中文学习网 - HTML5先行者学习网

2015818182317278.jpg (300×300)

  通过border-radius属性画空心圆和画实心圆的方法差不多,只是border的宽度只能小于高度和宽度的一半。代码如下。pjrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板pjrHTML5中文学习网 - HTML5先行者学习网

  #circle {pjrHTML5中文学习网 - HTML5先行者学习网

  width: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  height: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  background-color: #efefef; /* Can be set to transparent */pjrHTML5中文学习网 - HTML5先行者学习网

  border: 3px #a72525 solid;pjrHTML5中文学习网 - HTML5先行者学习网

  -webkit-border-radius: 100px;pjrHTML5中文学习网 - HTML5先行者学习网

  }pjrHTML5中文学习网 - HTML5先行者学习网

  虚线圆pjrHTML5中文学习网 - HTML5先行者学习网

2015818182338162.jpg (300×300)

  CSS Code复制内容到剪贴板pjrHTML5中文学习网 - HTML5先行者学习网

  #circle {pjrHTML5中文学习网 - HTML5先行者学习网

  width: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  height: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  background-color: #efefef; /* Can be set to transparent */pjrHTML5中文学习网 - HTML5先行者学习网

  border: 3px #a72525 dashed;pjrHTML5中文学习网 - HTML5先行者学习网

  -webkit-border-radius: 100px 100px 100px 100px;pjrHTML5中文学习网 - HTML5先行者学习网

  }pjrHTML5中文学习网 - HTML5先行者学习网

  2.半圆和四分之一圆pjrHTML5中文学习网 - HTML5先行者学习网

  半圆pjrHTML5中文学习网 - HTML5先行者学习网

2015818182355345.jpg (300×300)

以本例来讲,半圆的画法是把宽度设为高度的一半,并且也只设置左上角和左下角的半径。代码如下。pjrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板pjrHTML5中文学习网 - HTML5先行者学习网

  #quartercircle {pjrHTML5中文学习网 - HTML5先行者学习网

  width: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  height: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  background-color: #a72525;pjrHTML5中文学习网 - HTML5先行者学习网

  -webkit-border-radius: 200px 0 0 0;pjrHTML5中文学习网 - HTML5先行者学习网

  }pjrHTML5中文学习网 - HTML5先行者学习网

  四分之一圆pjrHTML5中文学习网 - HTML5先行者学习网

2015818182411344.jpg (300×300)

  四分之一圆的实现方法是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。本例代码如下。pjrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板pjrHTML5中文学习网 - HTML5先行者学习网

  #quartercircle {pjrHTML5中文学习网 - HTML5先行者学习网

  width: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  height: 200px;pjrHTML5中文学习网 - HTML5先行者学习网

  background-color: #a72525;pjrHTML5中文学习网 - HTML5先行者学习网

  -webkit-border-radius: 200px 0 0 0;pjrHTML5中文学习网 - HTML5先行者学习网

  }pjrHTML5中文学习网 - HTML5先行者学习网

  更多玩法pjrHTML5中文学习网 - HTML5先行者学习网

  看了这么多实例后,你完全可以自己创造更多玩法,如:pjrHTML5中文学习网 - HTML5先行者学习网

2015818182428664.jpg (550×300)

  虚线的半圆和四分之一圆。pjrHTML5中文学习网 - HTML5先行者学习网

2015818182450774.jpg (300×300)

  配合position属性做一个月亮。pjrHTML5中文学习网 - HTML5先行者学习网

2015818182507767.jpg (150×150)

  配合position、RGBa和z-index这些属性做一个本文开头的色彩维恩图。

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助