css3样式总结---渐变，文字样式等

一.css3的文本属性
1.阴影
text-shadow：水平阴影垂直阴影模糊半径阴影颜色；

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        #lvye
        {
            font-size:40px;
            text-shadow:4px 4px 2px gray;
            -webkit-text-shadow: 4px 4px 2px gray;
            -moz-text-shadow: 4px 4px 2px gray，4px 4px 2px gray，5px 5px 3px red，3px 3px 2px blue;
        }
    </style>
</head>
<body>
    <div id="lvye">我的中国心</div>
</body>
</html>

text-shadow可以接收多个阴影效果值；可以制作凸出的字，
设置上与左为白色即可，下与右是凹陷的字效果

2.text-stroke文字描边；

 
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 text-stroke属性</title>
    <style type="text/css">
        div
        {
            font-size:30px;
            font-weight:bold;
        }
        #div2
        {
             text-stroke:1px red;
             -webkit-text-stroke:1px red;
             -moz-text-stroke:1px red;
             -o-text-stroke:1px red;
　　　　　　　　/* color:transparent*/ 也可以设为透明色，效果也不错

        }
    </style>
</head>
<body>
    <div id="div1">文字没有被描边</div>
    <div id="div2">文字被描了1像素的红边</div>
</body>
</html>

3.text-overflow:ellipsis(省略号显示)/clip（直接裁掉）;

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 text-overflow属性</title>
    <style type="text/css">
        #div1
        {
            width:200px;
            height:100px;
            border:1px solid gray;
            text-overflow:ellipsis;
            overflow:hidden;     
            white-space:nowrap;  /*需要搭配overflow：hidden，和White-space使用才能显示有省略号的效果*/
        }
    </style>
</head>
<body>
    <div id="div1">2016年已经渐行渐远，有些记忆却历久弥新。回忆过去，除了喜怒哀乐的情绪，还有一样东西谁也绕不开，那就是责任。2016年，当一个大国面对世界的期待，当一名军人或医生遇到需要守护的人，当一个普通人身处危难之中，他们用自己的行动，诠释了“责无旁贷”这四个字的涵义。</div>
</body>
</html>

4.white-space:nowrap;强制文本在一行内显示；
5.word-wrap:break-word;强制换行；

6.css3的RGBA颜色
rgba中：r是红色值，g是绿色值，b是蓝色值（rgb正常取值是0-255）a是透明度；

用法
　　rgba(255,255,0,0.5)
　　rgba(50%,80%,50%,0.5)

二.css渐变类型；
css3渐变共两种：线性渐变与径向渐变
①线性渐变，指在一条直线上进行渐变，在网页中大多数是线性渐变；
background：linear-gradient（方向，开始颜色，结束颜色）
　　线性渐变的方向也可以是角度（90deg）


<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        div
        {
           width:100px;
           height:100px;
           background:linear-gradient(to bottom,red,blue),
           background:linear-gradient(45deg,green,yellow),
   　　　　　background:linear-gradient(to top left,black,pink)/*右上角到左上角*/

　　　　　　　　/*可以接收多个颜色参数，以下是彩虹的效果*/
　　　　　　　background:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

②径向渐变

CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变。与线性渐变区别在于颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。

语法：
background:radial-gradient(position ,shape size,start-color,stop-color)
　　　　　　　　　　参数：定义圆心位置、定义形状圆/椭圆、结束形状大小、开始颜色、结束颜色

<!DOCTYPE html>
<html>
<head>
    <title>CSS3径向渐变</title>
    <style type="text/css">
        /*设置div公共样式*/
        div
        {
            width:200px;
            height:150px;
            line-height:150px;
            text-align:center;
            color:white;
        }
        #div1
        {
            margin-bottom:10px;
            background:-webkit-radial-gradient( center,circle,orange,blue); 
        }
        #div2
        {
            background:-webkit-radial-gradient(bottom right,orange,blue);
        }
    </style>
</head>
<body>
    <div id="div1">在中间显示黄色圆形</div>
    <div id="div2">在右下角显示橘黄色</div>
</body>
</html>

关于size的值问题；

开始颜色与结束颜色

径向渐变可以接收一个颜色值列表，用于同时定义多种颜色的径向渐变

语法 
background:-webkit-radial-gradient(red,orange,yellow,green,blue);

默认情况下，径向渐变颜色节点是均匀分布的，不过我们也可以为每一种颜色添加百分比，来使得各个颜色节点不均匀分布。
background:-webkit-radial-gradient(red 5%,green 30%,blue 60%)