CSS3中的渐变和圆角

最新推荐文章于 2025-05-07 09:21:22 发布

weixin_30287169

最新推荐文章于 2025-05-07 09:21:22 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/newh5/p/4503302.html

渐变：
backgroud:linear-gradient()
语法：linear-gradient(起点，开始颜色，结束颜色);
　　起点：top，right，bottom，left，top left，top right， bottom left，bottom right，
例：

.test{
    background:-moz-linear-gradient(top,#fff,#000);
    background:-webkit-linear-gradient(top,#fff,#000);
    background:-ms-linear-gradient(top,#fff,#000);　　　　//IE9以上版本才支持；
    background:-o-linear-gradient(top,#fff,#000);
    background:linear-gradient(top,#fff,#000);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #fff, endColorstr = #000)";      //IE8.0 版本可以识别；
    +background:#ccc;                 //针对IE6 IE7设置纯色背景色；
}

圆角效果：
border-radius:20px 10px 5px 0; //顺时针四个角的圆角值；IE6、IE7、IE8不支持圆角效果；
　　　　正圆：border-radius:50%;

阴影效果：
box-shadow:3px 3px 2px #CCC; x偏移，y偏移，扩散值，颜色值

关于背景图的维护：
1、不要把所有的背景图都放在一张图片上，根据功能性进行大类划分，然后把功能相似的图标、背景图放在一张图片上。
2、使用background-position进行精确定位，需要注意各图片的上下距离，留好足够的空间。

.bg_sprite{background-image:url(); background-repeat:no-repeat}
#ico1 {width:宽度;height:高度;background-position:X坐标 Y坐标}
#ico2 {width:宽度;height:高度;background-position:X坐标 Y坐标}
#ico3 {width:宽度;height:高度;background-position:X坐标 Y坐标}

转载于:https://www.cnblogs.com/newh5/p/4503302.html