CSS3随手记（一）——渐变和其他

说到CSS3，首先想到就是其为我们提供一些图形操作，让我们的网站不再是由一张张图片组装成了！

现在先记录下，CSS3一些比较复杂，但是又经常会用到的样式。

渐变，主要用在于背景，属性为background-image或background中，大概用法如下：

1.线性渐变

background-image:linear-gradient(方向,颜色 0%,颜色 50%,颜色 100%);

• 方向：主要控制线性渐变的方向，使用规则如：to right ,从左到右渐变  还有其他 to left,to top ,to bottom 等；
• 颜色 %：主要是颜色代码+开始的位置的%，第一个默认为0%,最后一个不写则默认为100%;

注意：关于浏览器的兼容写法为如下：

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ace, #f96); 
/* Safari 4-5, Chrome 1-9 */ 
/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
background: -webkit-gradient(linear,top,from(#ace),to(#f96));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ace, #f96);

2.径向渐变

background-image:radial-gradient(开始位置1 结束位置2,形状 方向，颜色 %,颜色 %);

• 开始位置1 结束位置2：主要指的渐变的位置，以元素的左上方为原点，进行区分，如：50% 50%则表达为元素的中心点，另外还有其他表示，如：top left (等于0% 0%)或bottom right(等于100% 100%)
  
• 形状 方向：形状包括ellipse(椭形)、circle(圆形)，中心点方向： closest-side(最近端)、closest-corner(最近角)、farthest-side(最远端)、farthest-corner(最远角)、contain(包含)、cover(覆盖)
  
• 颜色 %：同线性渐变一样。

3.其他样式记录

3.1 text-transform:uppercase / lowercase (元素中大小写)；

3.2 box-shadow:(水平偏移 垂直偏移 模糊值 尺寸大小 颜色代码 inset);

3.3 禁止选中文字：

-moz-user-select:none;

-o-user-select:none;

-khtml-user-select:none;

-webkit-user-select:none;

-ms-user-select:none;

user-select:none;

3.4 一些伪样式（有些可能已经不是CSS3的所新建的）

.class:hover 鼠标聚焦在该元素时候添加的样式

.class:active 鼠标点击该元素时候添加的样式

.class:linked 鼠标访问过该元素时候添加的样式 (a超链接)

.class:link 未访问过的时候添加的样式(a超链接)

.class:focus 拥有键盘输入焦点的元素添加的样式(如：input等)

.class:lang(no) 向指定拥有lang的元素添加的样式(如：<div lang="no"></div>)

.class:before 在元素之前添加内容 添加内容写在content中(如：.class:before{content:"test";})

.class:after在元素之后添加内容 

关于这些学习，根据国外一个网站，模仿抄袭了一下，做了个IPhone，有兴趣的可以访问一下：http://crazyqiu.sinaapp.com/apple/iphone.html