CSS渐变、CSS3字体及CSS3文本效果

1.CSS渐变

1.1线性渐变

.box{

width: 300px;

height: 300px;

background: linear-gradient(red,blue)

position渐变方向 color1 color2

不给方向 默认从上到下的顺序第一种颜色到第二种颜色依次渐变

linear-gradient(color1,color2,color3...) 

linear-gradient(to bottom right,red,blue) 从上到下 

to right从左到右

to right bottom 即从左上到右下 right和bottom的位置顺序不太重要

}

1.2径向渐变

.box {

            width: 300px;

            height: 300px;

            background: radial-gradient(red,yellow,blue); 

            只给颜色不给任何值，均匀得径向渐变，从内到外 

            background: radial-gradient(red 20%, yellow 30%, blue 20%); 

            根据值给颜色

            background: radial-gradient(circle, red 20%, yellow 30%, blue 20%);

            第一个值设置为circle，即使盒子不是圆，渐变效果也是一个圆

        }

2.CSS3字体

@font-face {

            font-family: ywstyle;

            /* 必须的 */

            src: url(../fonts/fonts/shimesone_personal-webfont.eot);

            src: url(../fonts/fonts/shimesone_personal-webfont.svg);

            src: url(../fonts/fonts/shimesone_personal-webfont.ttf);

            src: url(../fonts/fonts/shimesone_personal-webfont.woff);

            /* 必须的，定义字体文件的路径 */

            多个字体文件是为了兼容各个浏览器的，有不兼容的可以依次往后兼容 

        }

        h1{

            font-family: ywstyle;

            font-size: 100px;

        }

3.CSS文本效果

3.1文本阴影

h1{

            text-shadow: 10px 10px 10px pink;

            (第一个值阴影水平方向的位置，第二个值阴影垂直方向的位置)为必选

            第三个值为阴影模糊距离，越大越模糊（如果设置为0则和文字一样清晰）

            第四个值为阴影颜色 

        }

3.2超出部分省略号

.h1 {

            width: 300px;

            height: 40px;

            border: 1px red solid;

            overflow: hidden;

            溢出隐藏

            white-space: nowrap;

           文本不会换行，在同一行继续

            text-overflow: ellipsis;

            用省略号来代表无法展示的文本

        }