这是我参与「第四届青训营 」笔记创作活动的第13天

前言：在进行背景设计的时候相信大家都见过背景颜色渐变而引发的特殊颜色反应，渐变使用的把控也能对网页布局和美观上更加吸引人的眼球。本篇文章主要是为介绍一些基础的背景渐变的使用技巧，大家一品鉴！

一.渐变

.box1{  
  width: 200px;
        height: 200px;
        /* background-color: #bfa; */

/* 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 ！！渐变是图片，需要通过background-image来设置 线性渐变，颜色沿着一条直线发生变化 linear-gradient() linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域

• 线性渐变的开头，我们可以指定一个渐变的方向 to left to right to bottom to top deg deg表示度数 turn 表示圈

• 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布， 也可以手动指定渐变的分布情况 repeating-linear-gradient() 可以平铺的线性渐变 */

       /* 
    background-image: linear-gradient(red,yellow,#bfa,orange); */
       /* background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px); */
       
       background-image: repeating-linear-gradient(to right ,red, yellow 50px);
  
   }
   
   
  

二.径向渐变

` .box1{ width: 300px; height: 300px;

radial-gradient() 径向渐变(放射性的效果) / /` 默认情况下径向渐变的形状根据元素的形状来计算的 正方形 --> 圆形 长方形 --> 椭圆形

• 我们也可以手动指定径向渐变的大小 circle ellipse
• 也可以指定渐变的位置
• 语法： radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置) 大小： circle 圆形 ellipse 椭圆 closest-side 近边 closest-corner 近角 farthest-side 远边 farthest-corner 远角 位置： top right left center bottom

*/ background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa) }

三.文本样式补充

.box1{ font-size: 50px; font-family: 微软雅黑;

        /* 
            text-decoration 设置文本修饰
                可选值：
                    none 什么都没有
                    underline 下划线
                    line-through 删除线
                    overline 上划线
        */

        /* text-decoration: overline; */

        /* text-decoration: underline red dotted; */
    }

    .box2{
        width: 200px;
        /* 
            white-space 设置网页如何处理空白
                可选值：
                    normal 正常
                    nowrap 不换行
                    pre 保留空白
        */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

四.总结

本文主要介绍了渐变的使用以及补充了一些关于文字样式的使用方法，篇幅有限，其实还有更多的使用方法，提供也仅供参考！