CSS学习
1.marquee标签控制
此标签用于实现文字移动的控制
其属性列表为:
| 属性 | 描述 |
| direction | 控制移动方向。向左移动：left；向右移动:right |
| behavior | 控制移动的方式。单向循环：scroll;单向不循环:slide;来回方向循环:alternate |
| loop | 循环次数 |
| scrollamount | 控制内容的移动速度 |
| scrolldelay | 控制内容每次移动前的延时(单位为微秒) |
2.CSS3中的transition属性
transtions属性用于控制某些事件发生前后的标签样式的切换动画效果
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
其语法如下:
transition: property duration timing-function delay;
分别表示属性的名称;变化时间--规定完成过渡效果需要多少秒或毫秒;变化类型--规定速度效果的速度曲线;等待时间--定义过渡效果何时开始.
其中变化类型有:ease;linear;ease-in;ease-out;ease-in-out;cublic-bezier
3.CSS3中的text-shadow属性
用于向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
语法:text-shadow:h-shadow v-shadow blur color;
其中 h-shadow必须 水平阴影的位置 允许为负值
v-shadow必须 垂直阴影的位置 允许为负值
blur 模糊的距离 可选
color 颜色设定 可选
4.CSS3中的opacity属性
用于设定图片的透明度，其值为一个小数，在不同的浏览器中有不同的设定方法,下面以设置图片本、半透明为例，给出不同浏览器中的设置方法：
filter:alpha(opacity=50)/*IE6 和 IE7*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* 适用于旧版火狐浏览器*/
-khtml-opacity:0.5;/* 适用于Chrome浏览器*/
-webkit-opacity:0.5;/* 适用于旧版Chrome浏览器 */
opacity:0.5;/*通用*/
5.CSS3中的transfrom属性
此属性用于控制标签样式的变化，例如大小、旋转、角度及位置等要素，其支持rotate、scale、skew、translate及matrix这些变换属性值。其功能表述如下表:
| 变换属性 | 相关变换属性/举例 | 功能描述 |
| rotate(角度) |
举例: rotate(30deg) |
按指定的角度旋转，如果设置的值为正数表示按顺时针旋转，如果设置的值为负数，表示按逆时针旋转 |
| scale(数值[,数值]) |
scaleX(数值) scaleY(数值) 举例:scale(2) |
水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放，scaleX仅在水平方向上进行缩放，scaleY仅在垂直方向上进行缩放) |
| skew(角度[,角度]) |
skewX(角度) skewY(角度) 举例: skew(30deg)
|
元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)；skewX仅使元素在水平方向上扭曲变形;skewY仅使元素在垂直方向上扭曲变形 |
| translate(数值,[数值]) |
translateX(数值) translateY(数值) 举例: translate(30px)
|
水平方向和垂直方向上同时移动;translateX(仅在X方向上移动);translateY(仅在Y方向上移动); |
| matrix(数值,数值,数值,数值,数值,数值) |
举例: matrix(1,0,0,1,100,100) (形状不变，纵向横向各自偏移100px) |
进行样式的重新映射，前两个参数是第一个向量的变换系数，中间两个参数是第二个参数的变换系数，最后两个参数是样式的偏移位置 |
注意：不同浏览器 不一定能直接使用transform属性,Safari和Chrome浏览器可以加前缀-webkit-或者-khtml-，火狐浏览器可以加前缀-moz-,Opera浏览器可以加前缀-0-IE9可以加前缀-ms-
6.CSS设置线性渐变
实现线性渐变可以通过为背景添加颜色渐变的图片,也可以通过使用浏览器的功能来为背景添加渐变的颜色。下面介绍几种常用的浏览器如何为背景添加渐变颜色。
在IE6或者IE7中可以使用一下实例的CSS语句：
filter:progid:DXImageTransform.Microsoft.gradient(enabled=true,gradientType=0,startColorStr=#f0f0f0,endColorStr=#020202);
含义:
enabled:滤镜开关选项，其值可以是true或者false，分别表示打开或者关闭滤镜。
gradientType:渐变类型,其值为 1表示水平渐变，为0表示垂直渐变；
startColor:表示上端或者左侧的起始颜色；endColorStr表示下侧或者右侧的终止颜色；
在Fire浏览器中可以使用以下形式的CSS语句，设置background-image属性来实现颜色的渐变。
background-image:-moz-linear-gradient(起始点|角度，{颜色 位置},{颜色 位置}，{颜色 位置} {颜色 位置}....)
含义:
起始点|角度: 在这里可以填写起始位置或者角度(最好不要角度和位置都填写) ,该起始点位置可以用百分号的形式或者单位形式；
(颜色 位置)：在这里可以填写颜色以及颜色的起始位置，例如红色可以使用类似的这几种方式:#ff0000、rgb(255,0,0)、red,而该颜色的位置可以使用百分号形式或者单位形式。
在谷歌Chrome或者苹果Safari浏览器中可以使用如下实例的CSS语句,设置backgroung-image属性实现颜色渐变：
background-image:-webkit-gradient(类型,位置1|{位置1,半径},{位置2|{位置2，半径}},{目标位置颜色},{目标位置颜色},{目标位置颜色}.....);
上面语句的选项含义如下:
类型:指定渐变类型，其值可以是radial或者linear,他们分别表示放射性渐变以及线性渐变：
{位置|{位置,半径}}：设置起始位置以及区域，如果是线性渐变只要填写位置就可以了，如果是放射性渐变还要填写半径;
{目标位置颜色}:设置目标位置的颜色，可以利用from来设定开始处的颜色，例如from{#ff0000},利用to语句设置结束处的颜色，例如to{#00000},或者可以利用color-stop语句设置指定位置处的颜色，例如用color-stop(70%,#00ff00)设置70%处的颜色。
