css3渐变和设置字体

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

一。css3渐变

1.线性渐变（线性渐变Linear Gradients 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等）

       linear-gradient ( position, color1, color2,…) 

position 渐变方向 color1第一种颜色 color2第二种颜色

      background:linear-gradient(red,blue)不给方向就是默认从上到下。

2.径向渐变（径向渐变—Radial Gradients 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合）

   background:radial-gradient(red,blue,yellow);
   
   就算div不是正方形，第一个值设置成circle,渐变的效果也是一个圆.

二。text-shadow向文本添加阴影

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

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

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

color 可选，阴影的颜色

   text-shadow: 20px 30px 1px red;

三。超出部分显示省略号

①。overflow: hidden;（溢出隐藏）

②。 white-space:nowrap; （文本不会换行，在同一行继续）

③。text-overflow: ellipsis;（用省略号来代表被修剪的文本 ）

    .a{
  width: 300px;
        height: 40px;
        border: 1px solid red;
       overflow: hidden;
      white-space:nowrap;
      text-overflow: ellipsis;
    }

溢出隐藏

          overflow: hidden;
         用省略号来代表被修剪的文本（不加也可以 但是为了确保各个浏览器的兼容 建议加上） 
        text-overflow: ellipsis;
       设置盒子属性为-webkit-box 必须的
        display: -webkit-box;
        -webkit-line-clamp 设置为2 表示第2行超出显示省略号
        如果设置成3 就是第3行超出显示省略号 
        -webkit-line-clamp: 3;
       破坏英文单词的整体性 在英文单词在一行还没有完全展示全的时候 就换行
        一个单词会分两行展示 
        word-break: break-all;
       盒子实现多行展示的必要条件文字是垂直展示 文字是多行展示的情况下使用 
        -webkit-box-orient: vertical;
        
          .a {
        width: 200px;
        height: 60px;
        border: 1px solid red;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        word-break: break-all;
        -webkit-box-orient: vertical;
    }

            @font-face（ 定义字体）{
           font-family: ywstyle;（  必需。规定字体的名称 ）
        src: url(./fonts/shimesone_personal-webfont.eot);
        src: url(./fonts/shimesone_personal-webfont.svg);
        src: url(./fonts/shimesone_personal-webfont.ttf);
        src: url(./fonts/shimesone_personal-webfont.woff);（4个字体文件 是为了兼容各个浏览器的，如果有一个不兼容 可以使用第二个 第二个不兼容可以使用第三个 以此类推
}   
    .a{
        font-family: ywstyle;
       }