让背景图有渐进成效&圆角
让背景图有渐进效果&圆角
在css中加上如下代码。其中第一行定色,
第二行请注意-moz这个是专门给火狐ff用的,因为ie的opacity对ff无效。
第三行就是透明的意思
第四行挺有意思,特别是其中的style,有大概3种吧,效果挺有趣的。
最后两个是让边角圆润的,俗称圆角
CSS 源代码 (CSS Code):
DIV 内容HTML源代码 (DIV/HTML Code):
呵呵,这个……真不会。。。
公司只保证ie跟ff,其他的不管
不过就怕将来开了欧洲市场……
估计也不用着急了,哈哈
在css中加上如下代码。其中第一行定色,
第二行请注意-moz这个是专门给火狐ff用的,因为ie的opacity对ff无效。
第三行就是透明的意思
第四行挺有意思,特别是其中的style,有大概3种吧,效果挺有趣的。
最后两个是让边角圆润的,俗称圆角
background-color:silver;
background-image: -moz-linear-gradient(top, white, silver);
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=silver);
filter:alpha(Opacity:0, FinishOpacity:100, Style:1, StartX:0, FinishX:0, StartY:0,FinishY:100);
CSS 源代码 (CSS Code):
<style type="text/css"> .chala-corner{width:660px;font-size:12px;background-color:#ffffff;padding:12px;margin:12px 0px} .chala-content{height:50px;line-height:50px;text-align:center;padding:0px 5px;background-color:#ffffff;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B} .chala{display:block;background-color:#ffffff} .chala *{display:block;height:1px;overflow:hidden;background-color:#ffffff} .chala1{margin:0px 2px;border-left:1px solid #b3b3b3;border-right:1px solid #b3b3b3;padding:0px 1px;background-color:#8B8B8B} .chala2{margin:0px 1px;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B} .chala3{margin:0px 0px;border-left:1px solid #b3b3b3;border-right:1px solid #b3b3b3} .chala4{margin:0px 0px;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B} </style>
DIV 内容HTML源代码 (DIV/HTML Code):
<div class="chala-corner"> <b class="chala"> <b class="chala1"> </b> <b class="chala2"> </b> <b class="chala3"> </b> <b class="chala4"> </b> </b> <div class="chala-content">这里填写内容 </div> <b class="chala"> <b class="chala4"> </b> <b class="chala3"> </b> <b class="chala2"> </b> <b class="chala1"> </b> </b> </div>
1 楼
mercyblitz
2010-08-18
希望楼主添加其他的浏览器特色style.
2 楼
去你姑
2010-08-18
mercyblitz 写道
希望楼主添加其他的浏览器特色style.
呵呵,这个……真不会。。。
公司只保证ie跟ff,其他的不管
不过就怕将来开了欧洲市场……
估计也不用着急了,哈哈