CSS3背景渐变及文本效果

一、渐变

1.Linear Gradients—线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

1、background: linear-gradient(position , color1 ,color2, ....)；
 /* position 渐变方向，color1 第一种颜色   color2第二种颜色 */

①渐变默认方向为从上到下，即to bottom，可省略不写；

②渐变方向的书写格式是：to 具体方位名词，比如to right，就是到右边，开始方向为到达方向的相反方向；以此类推：

to bottom 从上到下

to right 从左到右

to bottom right 从左上角到右下角

---

2. Radial Gradients—径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合。

① /* 颜色结点均匀分布的径向渐变 */
    background: radial-gradient(pink, skyblue);

② /* 颜色结点不均匀分布的径向渐变  根据自己具体设的值来的 */
background: radial-gradient(pink 30%, skyblue 40%);

 ③/* 形状为圆形的径向渐变 */

/* 第一个值设置表示圆形，就算盒子本身不是正方形，渐变的效果也是圆形 */

background: radial-gradient(circle, red, green, blue);

☆径向渐变可以指定渐变形状为圆形，那么无论什么样的盒子，其背景色渐变形状均呈现出圆形

---

 二、文本效果

1、text-shadow       向文本添加阴影 

        h-shadow    必需，水平阴影的位置，允许负值

                           值越大，越靠右                负值，靠左

        v-shadow    必需，垂直阴影的位置，允许负值

                            值越大，越靠下                负值，靠上

        blur             可选，模糊距离      ★ 如果设置的是0 那么将和正常的文字清晰度一样

        color           可选，阴影的颜色

---

三、超出显示省略号 

1、 overflow: hidden; 溢出隐藏 

 2、 white-space:nowrap;   文本不会换行，在同一行继续 

3、    text-overflow: ellipsis;  用省略号来代表被修剪的文本