一,边框属性
1,border: 复合属性.设置对象边框的特性.
取值:
border-width: 设置或检索对象边框宽度.
border-style: 设置或检索对象边框样式.
border-color: 设置或检索对象边框颜色.
#border4 {
width: 100px;
height: 100px;
border: 1px solid#FF0000;
}
<div id="border4">
</div>
2,border-width: 设置对象的边框宽度.
取值:
meadium: 定义默认厚度的边框
thin: 定义比默认厚度细的边框.
thick: 定义比默认厚度粗的边框.
★ 如果提供全部四个参数值,将按上,右,下,左的顺序作用于四边.
如果只提供一个,将用于全部的四边.
如果提供两个,第一个用于上,下,第二个用于左,右.
如果提供三个,第一个用于上,第二个用于左,右,第三个用于下.
也可以分别对四边设置边框:
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
#bo">
#bo ">#bo" > #bo "><style>
#border1{
width:200px;
height:100px;
border:solid;
/*border-width: 5px;*/
border-width:2px 3px 4px 5px ;
}
</style>"
<div id="border1">
</div>
3,border-color:设置或检索对象的边框颜色
取值:
(1)英文单词的颜色,如 "blue","red"
(2)十六进制值,如 "#ffffff","#ff0000"
(3)rgba,rgb,如 rgba(0,0,0,.5),rgb(255,255,255)
#bo">
#bo ">#bo" > #bo "><style>
#border2
{
width: 200px;
height: 100px;
border: solid;
border-color: #FF0000;
}
</style>"
<body>
<div id="border2">
</div>
</body>
4,border-style: 设置对象的边框样式
取值:
none:无轮廓.与将被忽略
hidden:隐藏边框.IE7 及以下尚不支持
dotted:点状轮廓.IE6 下显示为 dashed 效果
dashed:虚线轮廓.
solid: 实线轮廓.
double:双线轮廓.两条单线与其间隔的和等于指定的值
可以对四边分别设置其边框样式:
#border3 {
width: 200px;
height: 100px;
border: solid;
border - top - style: dotted;
border - left - style: dashed;
border - right - style: double;
border - bottom - style: solid;
}
<div id="border3">
</div>
5,border-radius: 设置对象使用圆角边框
水平半径:如果提供全部四个参数值,将按上左 (top-left),上右(top-right),下右(bottom-right),下左(bottom-left) 的顺序作用于四个角.
如果只提供一个,将用于全部的于四个角.
如果提供两个,第一个用于上左 (top-left),下右 (bottom-right),第二个用于上右 (top-right),下左 (bottom-left).
如果提供三个,第一个用于上左 (top-left),第二个用于上右 (top-right),下左 (bottom-left),第三个用于下右 (bottom-right).
取值
:用长度值设置对象的圆角半径长度.不允许负值
:用百分比设置对象的圆角半径长度.不允许负值
CSS代码#yj {
background - color: indianred;
width: 100px;
height: 100px;
border - radius: 10px 10px 20px 20px;
}
html代码: < div id = "yj" > </div>/
来源: http://www.cnblogs.com/46ly/p/5762499.html