CSS圆角DIV
2015-09-06 08:57
609 查看
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
提示:该属性允许您为元素添加圆角边框!
注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
等价于:
等价于:
正圆
正圆的规则是: width = height = 2*radius,如:
以上定义的是一个半径为50px的正圆
提示:该属性允许您为元素添加圆角边框!
语法
border-radius: 1-4 length|% / 1-4 length|%;
注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
例子 1
border-radius:2em;
等价于:
border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em;
例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于:
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
例子 3
正圆正圆的规则是: width = height = 2*radius,如:
width:100px; height:100px; border-radius: 50px;
以上定义的是一个半径为50px的正圆
相关文章推荐
- html静态网页制作中div+css的浅运用
- CSS兼容问题大全
- css3中-webkit-text-size-adjust详解
- CSS 让标点符号不出现在行首
- CSS文本属性(上)
- css简介
- 背景图片自适应
- css样式表1
- CSS 属性 :before && :after的用法,伪类和伪元素的区别
- 【笔记-前端】div+css排版基础,以及错误记录
- css样式表2
- CSS强制性换行word-break与word-wrap的使用
- css sprites
- 闲聊CSS之关于clearfix--清除浮动[转]
- css:清除浮动
- 前台html的样式调试
- CSS选择符及优先级计算
- CSS设置滚动条样式
- CSS3属性选择器与(:not)选择器
- CSS相关博客