CSS3钱柜娱乐实例:圆角的网页信息栏

2012-05-23 11:22:20  来源:网页教学网 
钱柜娱乐Webjx文章简介:使用CSS3的 Gradient 线性渐变,Radius 圆角,Shadow 阴影,完美兼容IE9(+),Chrome,Firefox,Opera。由于IE6/7/8对CSS3支持的不是很好,所以圆角和阴影效果不能显示出来。
使用CSS3的 Gradient 线性渐变,Radius 圆角,Shadow 阴影,完美兼容IE9(+),Chrome,Firefox,Opera。由于IE6/7/8对CSS3支持的不是很好,所以圆角和阴影效果不能显示出来。
不过在不需要圆角的情况下完全可以把圆角样式屏蔽。页面代码如下: <!DOCTYPE HTML>
 
<html>
 
<head>
 
<title>nice skin</title>
 
<style type="text/css">
 
/*=====common style=====*/
 
ul{margin:0;padding:0;list-style:none;font-size:12px;color:#767676;}
 
ul li{height:24px;line-height:24px;text-indent:38px;}
 
h3{height:28px;line-height:28px;margin:0;padding:0;text-indent:20px;font-size:14px;color:#333;border-top-left-radius:3px;border-top-right-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;webkit-border-top-left-radius:3px;webkit-border-top-right-radius:3px;-o-border-top-left-radius:3px;-o-border-top-right-radius:3px;}/*列表头的 圆角 样式*/
/*=====box style====*/
 
.box{width:300px;margin:10px auto;padding:0 0 5px 0;font-family:tahoma;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;}/*列表框的 圆角 样式*/
 
.blueshadow{box-shadow:0 0 5px #9bc1e7;-moz-box-shadow:0 0 5px #9bc1e7;-webkit-box-shadow:0 0 5px #9bc1e7;-o-box-shadow:0 0 5px #9bc1e7;}
 
/*列表框的 阴影 样式*/
.greenshadow{box-shadow:0 0 5px #6cb133;-moz-box-shadow:0 0 5px #6cb133;-webkit-box-shadow:0 0 5px #6cb133;-o-box-shadow:0 0 5px #6cb133;}
 
/*列表框的 阴影 样式*/
.greyshadow{box-shadow:0 0 5px #b9b9b9;-moz-box-shadow:0 0 5px #b9b9b9;-webkit-box-shadow:0 0 5px #b9b9b9;-o-box-shadow:0 0 5px #b9b9b9;}
 
/*列表框的 阴影 样式*/
.orangeshadow{box-shadow:0 0 5px #fea912;-moz-box-shadow:0 0 5px #fea912;-webkit-box-shadow:0 0 5px #fea912;-o-box-shadow:0 0 5px #fea912;}
 
/*列表框的 阴影 样式*/
.purpleshadow{box-shadow:0 0 5px #be91ce;-moz-box-shadow:0 0 5px #be91ce;-webkit-box-shadow:0 0 5px #be91ce;-o-box-shadow:0 0 5px #be91ce;}
 
/*列表框的 阴影 样式*/
/*=====border style=====*/
 
.borderblue{border:1px solid #9bc1e7;}
 
.bordergreen{border:1px solid #6cb133;}
 
.bordergrey{border:1px solid #b9b9b9;}
 
.borderorange{border:1px solid #fea912;}
 
.borderpurple{border:1px solid #be91ce;}
 
/*=====header3 style=====*/
 
.blueheader{background:-moz-linear-gradient(top, #dfefff 0, #c1e0fe 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#dfefff), to(#c1e0fe));background:-o-linear-gradient(top, #dfefff 0, #c1e0fe 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfefff', endColorstr='#c1e0fe', GradientType="0");background:linear-gradient(top, #dfefff 0%, #c1e0fe 100%);border-bottom:1px solid #9bc1e7;}
 
.greenheader{background:-moz-linear-gradient(top, #e6f7cb 0, #c6e5ac 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#e6f7cb), to(#c6e5ac));background:-o-linear-gradient(top, #e6f7cb 0, #c6e5ac 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6f7cb', endColorstr='#c6e5ac', GradientType="0");background:linear-gradient(top, #e6f7cb 0%, #c6e5ac 100%);border-bottom:1px solid #6cb133;}
 
.greyheader{background:-moz-linear-gradient(top, #fafafa 0, #e9e9e9 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#e9e9e9));background:-o-linear-gradient(top, #fafafa 0, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#e9e9e9', GradientType="0");background:linear-gradient(top, #fafafa 0%, #e9e9e9 100%);border-bottom:1px solid #b9b9b9;}
 
.orangeheader{background:-moz-linear-gradient(top, #fef2d8 0, #fee7b2 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#fef2d8), to(#fee7b2));background:-o-linear-gradient(top, #fef2d8 0, #fee7b2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fef2d8', endColorstr='#fee7b2', GradientType="0");background:linear-gradient(top, #fef2d8 0%, #fee7b2 100%);border-bottom:1px solid #fea912;}
 
.purpleheader{background:-moz-linear-gradient(top, #f7e8ff 0, #ebd6f8 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7e8ff), to(#ebd6f8));background:-o-linear-gradient(top, #f7e8ff 0, #ebd6f8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7e8ff', endColorstr='#ebd6f8', GradientType="0");background:linear-gradient(top, #f7e8ff 0%, #ebd6f8 100%);border-bottom:1px solid #be91ce;}
 
/*=====list style=====*/
 
.bluelist{background:#f2f9ff;}
 
.bluelist li{border-bottom:1px dotted #9dbde6;}
 
.greenlist{background:#f0fadf;}
 
.greenlist li{border-bottom:1px dotted #6cbb2e;}
 
.greylist{background:#f5f5f5;}
 
.greylist li{border-bottom:1px dotted #bababa;}
 
.orangelist{background:#fff9ed;}
 
.orangelist li{border-bottom:1px dotted #ffa813;}
 
.purplelist{background:#fcf4ff;}
 
.purplelist li{border-bottom:1px dotted #c290cf;}
 
li:nth-child(2){background:#fff;}
 
/*=====url=====*/
 
p{line-height:20px;text-align:center;font-size:12px;}
 
p a{color:#5e9ede;text-decoration:none;}
 
</style>
 
</head>
 
<body>
 
<div class="box blueshadow borderblue">
 
<h3 class="blueheader">项目标题栏</h3>
 
<ul class="bluelist">
 
<li>列表一</li>
 
<li>列表一</li>
 
<li>列表一</li>
 
</ul>
 
</div>
 
<div class="box greenshadow bordergreen">
 
<h3 class="greenheader">项目标题栏</h3>
 
<ul class="greenlist">
 
<li>列表一</li>
 
<li>列表一</li>
 
<li>列表一</li>
 
</ul>
 
</div>
 
<div class="box greyshadow bordergrey">
 
<h3 class="greyheader">项目标题栏</h3>
 
<ul class="greylist">
 
<li>列表一</li>
 
<li>列表一</li>
 
<li>列表一</li>
 
</ul>
 
</div>
 
<div class="box orangeshadow borderorange">
 
<h3 class="orangeheader">项目标题栏</h3>
 
<ul class="orangelist">
 
<li>列表一</li>
 
<li>列表一</li>
 
<li>列表一</li>
 
</ul>
 
</div>
 
<div class="box purpleshadow borderpurple">
 
<h3 class="purpleheader">项目标题栏</h3>
 
<ul class="purplelist">
 
<li>列表一</li>
 
<li>列表一</li>
 
<li>列表一</li>
 
</ul>
 
</div>
 
</body>
 
</html>
补充:CSS3的 Radius 圆角
语法:
取值:<length>:由浮点数字和单位标识符组成的长度值。不可为负值。border-top-left-radius:由浮点数字和单位标识符组成的长度值。不可为负值。
说明:
border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
  1. 第一个值是水平半径。
  2. 如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
  3. 如果任意一个值为0,则这个角是矩形,不会是圆的。
  4. 值不允许是负值。
更多
钱柜娱乐