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%处的颜色。

原文地址:https://www.cnblogs.com/xiaozhuyang/p/web_css.html