1. IE下的渐变：  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='0');

2.多背景：background:url(Images/c.png) no-repeat 0 0,url(Images/s-1.png) no-repeat 0 0; 

 

 

–background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

仿苹果开机效果： 

 

 

                   
       
        人气不过肥皂泡
       

 3.rgba：

l含义

•r  Red  红  0-255

•g  Green  绿  0-255

•b  Blue  蓝  0-255

•a  Alpha  透明    0-1

background:rgba(0,0,0,0.4);

4.背景图裁切  background-clip

•border： 从border区域向外裁剪背景。

•padding： 从padding区域向外裁剪背景。

•content： 从content区域向外裁剪背景。

•no-clip： 从border区域向外裁剪背景。

•text :文本

                   
       
                我们都没错，只是不适合!    
       

 5.背景图大小设置 background-size:20px 20px;

 

例：背景全屏固定显示： body{margin:0;height:1000px;background:url(miaov.png) no-repeat fixed; background-size:100% 100%;} 

6.背景图原点设置 

lbackground-origin ： border | padding | content 

•border-box： 从border区域开始显示背景。

•padding-box： 从padding区域开始显示背景。

•content-box： 从content区域开始显示背景。

background-origin:content-box;

 7.盒模型阴影  box-shadow:10px 10px 10px 4px rgba(0,0,0,0.8);

l用法  

•box-shadow:[inset] x y blur [spread] color

•参数

–inset：投影方式

»inset：内投影

»不给：外投影

–x、y：阴影偏移

–blur：模糊半径

–spread：扩展阴影半径

»先扩展原有形状，再开始画阴影

–color

 

8.渐变   background:-webkit-linear-gradient(45deg,red 0%,yellow 50%,blue 100%);  /*角度是逆时针的*/

 

background:-webkit-radial-gradient()/-webkit-linear-gradient()/-webkit-repeating-linear-gradient()/-webkit-repeating-radial-gradient()  反复径向渐变

 

例1：-webkit-linear-gradient()

例2：-webkit-repeating-linear-gradient()

9.渐变配合背景 background:-webkit-linear-gradient(left top,#fff 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 70%,rgba(255,255,255,1) 70%),url(Images/new_bg.png) no-repeat;

10.渐变旋转 background:-webkit-linear-gradient(0deg,#ff6e02 0%,#fffc00 50%,#ff6e02 100%);

11.径向渐变  background:-webkit-radial-gradient(center,100px 200px,red 0%,blue 100%);

•参数

–起点：同线性渐变  默认：中心

–形状： ellipse、circle  默认： circle

–大小：要给出起点，否则会和“起点”冲突

»50px 50px

 

12.文字阴影 

•最简单用法

–text-shadow:2px 2px 4px black

•阴影叠加

–text-shadow:2px 2px 0px red, 2px 2px 4px green;

–先渲染后面的，再渲染前面的

 

•text-shadow：x y blur color, …

•参数

–x  横向偏移

–y  纵向偏移

–blur  模糊距离

–color  阴影颜色

•文本阴影如果加很多层，会很卡很卡很卡

 

例1：text-shadow:10px 10px 20px #000,1px 1px 10px red,5px 5px 15px yellow;

 

文字描边

l-webkit-text-stroke:宽度 颜色

例2：text-shadow:6px 7px 0px #fdc9c9;-webkit-text-stroke:3px #fff;