您的位置：首页 > Web前端 > CSS

div+css关于边框样式的定义

2012-08-12 19:11 956 查看

以下是有关于边框样式的定义，首先，以下样式是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的一些定义属性的测试内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5中关于border的定义：</title>
</head>
<style type="text/css">
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;}
</style>
<body>
<div class="content">
<div class="content_text text_1">
在Firefox浏览器里能看到边框颜色渐变效果
</div>
<div class="content_text text_2">
在safari3+和FF3.5浏览器里能看到边框背景图
</div>
<div class="content_text text_3">
在Firefox和Safari 3的浏览器里能看到圆角效果
</div>
<div class="content_text text_4">
FF和Safari下可以看到效果
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航