这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战
前言
大家好哇，今天我们来谈谈css3阴影、背景和渐变，大神请绕道，因为本文基本摘自我刚入行时的笔记哦~
CSS3阴影
css3阴影主要包括文字阴影和边框阴影。
文字阴影
text-shadow:文字阴影
语法： text-shadow：水平偏移 垂直偏移 羽化大小 颜色
边框阴影
box-shadow:边框阴影
none： 无阴影<length>：第1个长度值用来设置对象的阴影水平偏移值。 可以为负值<length>：第2个长度值用来设置对象的阴影垂直偏移值。 可以为负值<length>：如果提供了第3个长度值则用来设置对象的阴影模糊值。 不允许负值<length>：如果提供了第4个长度值则用来设置对象的阴影外延值。 可以为负值<color>：设置对象的阴影的颜色。inset：设置对象的阴影类型为内阴影。 该值为空时，则对象的阴影类型为外阴影
CSS3背景
在css2中已经有background属性了，用于设置盒子的背景相关的一些样式，在CSS3中新增加了几个背景相关的几个属性。
background-size
用户设置背景图片的尺寸大小
会导致图片失真的两种设置方式
/*background-size:设置背景图片的大小*/
background-size: 600px 400px;
/* 百分比是相对于盒子自身的宽度和高度 */
background-size: 100% 100%;
不失真的设置方式（等比例缩放）
/*containe保证等比例缩放,但是会出现留白*/
background-size: contain;
/*cover保证等比例缩放,并且不会留白，但是出现有一部分图片不显示*/
background-size: cover;
background-clip
设置背景区域的大小
/*盒子的背景区域是整个盒子，包括边框和padding*/
/*默认值，设置背景区域包括了边框*/
background-clip: border-box;
/*背景区域只包含padding和content*/
background-clip: padding-box;
/*背景区域只包含content*/
background-clip: content-box;
background-origin
设置背景图片的原点的位置，默认是padding的地方开始
background-image: url(images/bg.jpg);
/*设置原点从border开始*/
background-origin: border-box;
/*设置原点从padding开始,默认值*/
background-origin: padding-box;
/*设置原点从content开始*/
background-origin: content-box;
多重背景
background设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且通常来说，颜色都是在最后面进行设置。
background是一个合写的属性，如果在background之前设置了background相关的样式，会被覆盖掉。
根据上面的介绍，我们可以很容易的写一行多重背景的代码，例如：
background: url(images/1.jpg) no-repeat top left, url("images/2.jpg") no-repeat right bottom, pink;
CSS3渐变
css3中的渐变包括线性渐变、径向渐变。
线性渐变
linear-gradient指沿着某条直线朝一个方向产生的渐变效果。
//注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效
//渐变的两个要求：有区间，有颜色变化。
//最简单的渐变
background-image: linear-gradient(red, green);
//设定渐变的方向
background-image: linear-gradient(to right, red, green);
//也可以设定渐变的角度
background-image: linear-gradient(45deg, red, green);
//设定渐变的范围
background-image: linear-gradient(to right, red 20%, green 80%)
//每一个区间表示渐变颜色的范围
background-image: linear-gradient(to right, red 20%, green 20%)
径向渐变
radial-gradient指从一个中心点开始沿着四周产生渐变效果
/*1. 最简单的渐变*/
background-image: radial-gradient(red, green);
/*2. 指定圆的半径和圆心*/
background-image: radial-gradient(200px at center, red, green);
/*3. 指定椭圆*/
background-image: radial-gradient(200px 80px at center, red, green);
/*4. 指定范围*/
background-image: radial-gradient(200px at center, green 50%, red 50%);
后记
你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。
关注我，前端路途一起走。嘿哈~😛
