Css3小技术

 







 圆角border-radius
 
    border-radius:length
    *注： 这是一个缩写，相当于四个角设置同样的值，用px或者百分比都可以，想要成为圆形，就用50%，你也可以单独设置每个角，语法和设置边框有的一拼，例如border-radius:5px 2px 4px 1px，分别是左上、右上、右下、左下，border-top-left-radius:5px;兼容IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持。。。还有为了兼容老版本的火狐啊，谷歌啊等等，你可以加前缀，火狐-moz、谷歌/苹果-webkit、Opera -o、ie -ms。
 
 
    投影box-shadow
     box-shadow：h-shadow v-shadow blur spread color inset
     *注： h-shadow水平阴影（必需） v-shadow垂直阴影（必需） blur模糊距离（可选） spread的尺寸（可选） color阴影颜色（可选） inset内部阴影，最后要提的是inset，加上就是内阴影，不加就是外阴影。

     文本投影text-shadow
     text-shadow:h-shadow v-shadow blur color
     h-shadow水平阴影（必需） v-shadow垂直阴影（必需） blur模糊距离（可选） color阴影颜色（可选）。
 
     背景渐变gradient
     gradient更确切的是属性值，由于火狐和谷歌写法不同，规定按钮的背景，那就是background-image:-moz-linear-gradient(center top , #ddd 0%, #D4D4D4 50%, #C5C5C5 50%, #ADADAD 100%);linear-gradient是线性渐变，radial-gradient是径向渐变，我们这里的按钮时用线性的，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角,我写了个center，可以去掉，#ddd 0%这个是起始颜色的意思，#ADADAD 100%结束颜色，中间可以按自己的需求添加各种百分比位置的颜色，我那个50%是指中间部位，第一个50%是前半程的结束颜色，第二个50%是后半程的起始颜色

    再看下webkit内核的写法，background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.5, #D4D4D4), color-stop(0.5, #C5C5C5), color-stop(1, #ADADAD));linear线性渐变写到了括号里边，然后是一对起始坐标，一对结束坐标，可以用具体数字也可以用关键位置，我用的关键位置代表左上到左下，你得脑海里是不是出现了一条竖着的直线，对了，在往后边的参数看color-stop(0, #ddd)写颜色要用color-stop这个呀，0就是起始，后边是对应的颜色，1代表结束颜色，中间参数可以用0到1之间的小数表示。

      倒影-webkit-box-reflect
      -webkit-box-reflect：direction | offset | mask-box-image
      目前只有weibkit内核的浏览器支持，direction的参数有above：倒影在对象的上边、below：下边、left：左边、right：右边，offset倒影与对象之间的间 隔，可以用像素单位，可以用百分比，可以为负数；懂ps的知道倒影需要遮罩层，mask-box-image就是遮罩层，其可用的参数是；none：无遮 罩图像、url：引用图像作为遮罩、linear-gradient：使用线性渐变创建遮罩图像、radial-gradient：使用径向(放射性)渐 变创建遮罩图像、repeating-linear-gradient：使用重复的线性渐变创建背遮罩像、repeating-radial- gradient：使用重复的径向(放射性)渐变创建遮罩图像，咱不复杂，就用线性渐变就够了，-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3))这个参数组合你可以直接用的，就是一个遮罩的用处。