css3的用法整理（一）_html/css_WEB-ITnose

首先，这篇文章只说css3的属性，在不支持这些属性的浏览器里怎么实现这些效果不在这篇文的考虑范围之内。

渐变Gradient

线性渐变：linear-gradient

语法：-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

---

示例：-moz-linear-gradient(top,#fff,#000);

这个示例的意思是，从上往下实现渐变，从上往下实现由白色变为黑色的渐变top也能写成top left表示从左上角开始实现渐变

径向渐变radial-gradient

语法：-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

可以接收的参数：起始位置、方向、颜色，径向梯度，渐变的形状（圆形或椭圆形），大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）

示例：

-webkit-radial-gradient(bottom left,ellipse closest-side,#f90 5%,#f00 30%,#2e9900 80%)

从这个示例来说，便是：起始位置是左下角bottom left，渐变形状是椭圆ellipse，百分比表示径向梯度，三个颜色值表示起始颜色值，closest-side表示的就是渐变的大小

径向渐变现在还不支持Opera浏览器

重复渐变

repeating-linear-gradient根据我的测试，这个在火狐可以显示，在webkit内核浏览器并不能正常显示repeating-radial-gradient这个可以在firefox，chrome正常显示

示例代码：

-webkit-repeating-linear-gradient(top left -45deg,#ace,#ace 5px,#2e9900 5px,#2e9900 10px);

我的demo：http://codepen.io/superSnail/pen/jWwxpP

多个背景

语法：background:url(...),url(...),url(...)举个例子~假设背景图有1.jpg,2.jpg,3.jpg那么我们可以这样写

background:url("1.jpg") 0 0 no-repeat,                 url("2.jpg") 200px 0 no-repeat,                 url("3.jpg") 400px 201px no-repeat;

也可以这样写

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");background-repeat: no-repeat, no-repeat, no-repeat;  background-position: 0 0, 200px 0, 400px 201px;

圆角border-radius

在没有border-radius这个属性之前，实现圆角的方式一般使用背景图。精通css上介绍了两种用图片实现的方式，其一是用两个带圆角的长条作为顶部和底部，中间可以平铺。其二是将四个角切图，然后其他区域填充来实现圆角的框

语法：border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

border-radius是一种缩写的方法

• 如果写一个参数表示四个角的水平弧度和垂直弧度都是同一个值
• 如果写两个参数，表示top-left和bottom-right是第一个参数，top-right和bottom-left是第二个参数
• 如果写三个参数，表示，top-left是第一个参数，top-right和bottom-left是第二个参数，bottom-left是第三个参数
• 如果是四个参数，top-left是第一个参数，top-right是第二个参数，bottom-right是第三个参数，bottom-left是第四个参数

示例：border-radius:10px 10px 5px 5px /5px 5px 10px 10px;

这样的写法/前面的表示水平方向的四个弧度，/后面表示垂直方向的四个弧度

另外需要特别注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面

border-radius的demo：http://codepen.io/superSnail/pen/QyMNZv

图片边框border-image

首先，border-image不支持IE。支持的浏览器为Firefox3.5+，chrome或Safari3+

语法：border-image:source slice repeat

分别表示，边框背景图片地址，图片裁切方式，图片重复方式

• 裁切方式：将背景图切四刀变成一个九宫格,这是理解border-image最为关键的点见下图：

• 重复方式：有三种，repeat（重复），stretch（拉伸），round（平铺）。默认值是stretch

切九宫格的时候，数值默认单位是px，千万不能直接把px写上去，会出错！slice可以有1~4个参数，其方位顺序和margin，padding等一致，按照上右下左顺时针所以上图应该写为30% 35% 40% 30%或者30% 35% 40%

slice 将背景图切为九块之后，首先四个角上得图仍然放在四个角，然后四边的中间部分，将会按照你设定的重复模式开始描绘边框，默认就是拉伸的，如果你想要用重复或者平铺就要自己设置啦。

说一下重复和平铺的区别：重复就是按照原来的大小repeat，如果到最边上放不下了就直接切掉,所以会出现半块的情况平铺的意思就是，不一定按照原来的大小去重复，为了铺满需要的长度且不出现半块的情况，改变需重复单元的宽度，以实现平铺。（但是我的测试结果是，平铺和重复的展示效果是一样的，详细见demo）理解了以上，再看border-image的实现方式就会轻松很多。举个例子~http://codepen.io/superSnail/pen/adyJEp

详细的内容可以参考大大的文章,这是我详细学习border-image的教程http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image详解、应用及jquery插件/

投影box-shadow

语法：box-shadow:type xoffset offset blur-radius spread-radius,color

分别是指：阴影类型，横向偏移，纵向偏移，模糊半径，扩展半径，颜色

• 其中阴影类型为inset时，为内阴影，默认为外阴影
• color不设值的时候，会取浏览器的默认阴影颜色，但是各浏览器的默认值不一样，在webkit内核的浏览器下阴影表现为透明色而mozilla和oprea下表现为黑色，建议不要省略
• 在写多层次阴影的时候，先写的层级会比较高
• 对图片写内阴影是不会有任何效果的

dropShadow效果demo：http://codepen.io/superSnail/pen/XXajKm

文字阴影 text-shadow

语法：text-shadow:offset,offset,blur,color

text-shadow可以根据模糊半径的不同一层一层叠加实现各种文字效果

例如：

text-shadow:40px #ff00de, 0 0 70px #ff00de;

这样样式的叠加，模糊半径都是从中心点开始算的，具体见demo

文字阴影的demohttp://codepen.io/superSnail/pen/QyMjBV

透明度RGBA，opacity

首先RGBA表示红，绿，蓝和透明四个通道所以背景白色可以表示为background:rgba(255,255,255,1);就是红绿蓝三个通道值为255，透明度为1，也就是不透明。如果要半透明效果可以将透明通道的值设为小数。

其次，用opacity实现透明，白色背景不透明，应该写成background:#fff;opacity:1;

以上两种方法按照这样的规律类推。

opacity的缺点是，如果父元素设为半透明，那么它的子元素都会继承这个半透明。然而rgba的表示方法就不会有这个问题。比如要实现一个半透明的弹出层，用opacity的话，就将导致这个层里的文字都会以半透明显示。为了解决这样问题就不得不用两层，将文字以定位的方式显示。