div+css关于边框样式的定义_html/css_WEB-ITnose

以下是有关于边框样式的定义，首先，以下样式是html5的定义内容，对于浏览器，IE8、IE8以下的浏览器存在很多兼容问题，但是IE9浏览器，已经达到了他的兼容效果：

border-color:#ccc #aaa #999 #666 #777;的定义

使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。

border-radius:5px;

以下是有关border的一些定义属性的测试内容：

html5中关于border的定义：


body{
background:#fff;}
.content{
width:600px;
margin:10px auto;
border:1px solid #ccc;
text-align:center;}
.content_text{
width:500px;
margin:10px;
min-height:100px;
_height:100px;
margin-bottom:20px;}
.text_1{border:8px solid #000;
-moz-border-bottom-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding:5px 5px 5px 15px;}
/*把像素的边框，从第一个像素的颜色算起依次我、由外向内逐像素扩展，最后多余的像素值有最后一个颜色定义，也就是多出的像素宽执行最后一个颜色值*/
.text_2{
-webkit-border-image:url(text.jpg) 0 12 0 12 stretch stretch;-moz-border-image:url(text.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width:0 32px;
padding:10px;
text-align:center;
font-size:16px;
color:#60C;
text-decoration:inherit;
+color:black;/*不理解意思*/
}
.text_3{
border:1px solid #00F;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;/*border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-top-right-radius */
border-radius: 11px;
padding:5px;}
.text_4{
-webkit-box-shadow:5px 2px 6px #000;
-moz-box-shadow:2px 2px 6px #000;/*第一个像素值是阴影的向左移动值，第二个像是只是阴影的距离，第三个像素值阴影扩散值*/
padding:4px 10px;}

在Firefox浏览器里能看到边框颜色渐变效果

查看更多关于div+css关于边框样式的定义_html/css_WEB-ITnose的详细内容...