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

  • 相关阅读:
    Nginx 跨域配置支持
    数据结构与算法分析
    数据结构与算法分析
    数据结构与算法分析
    Bash shell
    Bash shell
    HHUOJ 1040
    HHUOJ 1114
    HDUOJ 1171
    HDUOJ 1428
  • 原文地址:https://www.cnblogs.com/xiaozhuyang/p/web_css.html
Copyright © 2020-2023  润新知