23406站长网欢迎你的到来,如本站内容对你有所帮助请收藏(www.23406.com)以便下次访问... 网站收录提交入口
当前位置:首页 > 源代码分享 > CSS设置圆角代码中border-radius属性详解

CSS设置圆角代码中border-radius属性详解

CSS设置圆角代码中border-radius属性详解
    CSS设置圆角代码中border-radius属性详解简要概括:ca1328站长想在html网页中添加div模块设置圆角,使用border-radius代码来设置圆角,但对border-radius代码有哪些属性不太了解,23406小编详解border-radius属性。...
  • 本文网址:http://www.23406.com/yuandaima/591.html
  • 简略名称:CSS设置圆角
  • 相关解析:border-radius属性
  • 归属分类: 代码 设置 css 圆角 属性
CSS设置圆角代码中border-radius属性详解正文-->
ca1328站长想在html网页中添加div模块设置圆角,使用border-radius代码来设置圆角,但对border-radius代码有哪些属性不太了解,23406小编详解border-radius属性。

border-radius属性解析如下:
 
CSS圆角只需设置一个属性:border-radius(含义是"边框半径"),这个代码还可以添加属性值,就能同时设置四个圆角的半径,所有合理的CSS度量值都可以使用:em、ex、pt、px、百分比等等。
 
比如,下面是一个div方框:
 
现在设置它的圆角半径为15px:可以通过这代码来实现 border-radius: 15px;
 
这条语句同时将每个圆角的"水平半径"(horizontal radius)和"垂直半径"(vertical radius)都设置为15px。
 
border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
 
  border-radius: 15px 5px;
 
  border-radius: 15px 5px 25px;
 
  border-radius: 15px 5px 25px 0px;
 
(左下角的半径为0,就变成直角了。)
 
border-radius还可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同。
 
  border-radius: 15px 5px / 3px;
 
  border-radius: 15px 5px 25px / 3px 5px;
 
  border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
 
目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。
 
  -moz-border-radius: 15px;
  border-radius: 15px;
 
(注意:border-radius必须放在最后声明,否则可能会失效。)
 
另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。
 
  * -moz-border-radius-topleft(标准语法:border-top-left-radius)
  * -moz-border-radius-topright(标准语法:border-top-right-radius)
  * -moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)
  * -moz-border-radius-bottomright(标准语法:border-bottom-right-radius)

因此,目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值。
 

  • 简介
  • 收录
  • 分类
上一篇:html静态网页模板开头代码 下一篇:text-align属性及使用方法
Alexa排名/搜索流量占比
  • CSS设置圆角代码中border-radius属性详解Alexa排名
  • CSS设置圆角代码中border-radius属性详解搜索流量占比