最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3 border-radius 属性学习实例教程
时间:2015-11-23 编辑:简简单单 来源:一聚教程网
实例
给div元素添加圆角的边框:
div
{
border:2px solid;
border-radius:25px;
}
浏览器支持
IE9+, Firefox 4+, Chrome, Safari 5+,和Opera支持border-radius属性。
属性定义及使用说明
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
提示: 这个属性允许你为元素添加圆角边框!
默认值: 0
继承: no
版本: CSS3
JavaScript 语法: object object.style.borderRadius="5px"
语法
border-radius: 1-4 length|% / 1-4 length|%;
注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。
值 描述
length 定义弯道的形状。
% 使用%定义角落的形状。
例子 1
border-radius:2em;
is equivalent to:
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;
is equivalent to:
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;
CSS3中border-radius属性实例教程
CSS盒子模型有很多的内容和属性,CSS也一直在更新和新增属性,今天我们来说说CSS3新增的盒子模型中的
边框中的内容,也就是border-radius属性。
border-radius属性设置元素的边框添加圆角,其实没有边框也可以添加圆角效果。但是要是显示出来,就必须增
加背景色或者边框。
可能的值:xpx;圆角是xpx,半径为xpx的四分之一圆。
语法格式为:
border-radius:apx bpx cpx dpx; 顺时针。当a=b=c=d,写为:border-radius:apx;
这样看起来很抽象,还是拿例子来说明
实例一:没有边框,有背景色的div,给其增加边框圆角属性
运行的结果为: