一、阴影效果

1、box-shadow

box-shadow: x轴   y轴   阴影模糊度   阴影缩放    颜色   outset（默认外显，不要写）/inset（内显）

功能：为了解决h5的1px边框问题，也可用于装饰

.box{
            width: 100px;
            height: 100px;
            background-color: red;
            /* x轴 y轴 阴影模糊度 阴影缩放 颜色 内显 */
            box-shadow: 1px 1px 1px 1px green inset;
}

<div class="box"></div>

2、text-shadow

text-shadow: x轴 y轴 阴影模糊度 颜色

文字的阴影效果

/* 字间距 */
letter-spacing: 10px;
/* 文本无法被选中 */
user-select: none;

二、渐变

渐变属于css3的样式，使用的是background或者background-color来设置，必须使用两种或者两种以上的颜色，用于代替一些背景图片

1、线性渐变

①、默认渐变

默认是从后面（red->pink->blue）开始生效，默认是从下往上（to bottom）开始渐变；

background: linear-gradient(blue,pink,red);

 

②、to用于控制渐变的方向

可以使用to top使其从上往下开始渐变，将其颜色颠倒过来，to left 、to right同理；

background: linear-gradient(to top,blue,pink,red);

background: linear-gradient(to left,blue,pink,red);

background: linear-gradient(to right,blue,pink,red);

 

 

③、角度值控制方向

可以使用角度值控制渐变的方向 

background: linear-gradient(45deg,blue,pink,red);

④、百分比控制比例大小

可以使用百分比来控制渐变的各个颜色块所占大小

background: linear-gradient(blue 10%,pink 50%,red 100%);

 

强制分层，有明显的分界线

background: linear-gradient(blue 10%,pink 10%,pink 50%,red 50%,red 100%);

 

⑤、平铺

使用repeating-linear-gradient实现平铺

background: repeating-linear-gradient(45deg,pink 0px,pink 10px,red 10px,red 20px);

 

2、径向渐变

①、圆

由内而外的画圆，使用at确定圆心的位置，可以使用 at left/right/top/bottom/center 确定圆心的位置，也可以使用像素值px；

background: radial-gradient(circle at 50% 50%,red ,green)

background: radial-gradient(circle at left,red,green)

 

background: radial-gradient(circle at 10px 10px,red 10px,green 10px)

 

平铺效果：

background: repeating-radial-gradient(circle at 10px 10px,
red 0px,red 10px,
green 10px,green 20px)

 

 

②、椭圆

相比较于圆的画法，增加了一个表示椭圆宽和高的值

 

background: radial-gradient(ellipse 100% 50% at 10px 10px,red 10px,green 10px)

 

 

标签：pink,linear,gradient,无标题,background,10px,red
来源： https://blog.csdn.net/weixin_46376652/article/details/123627283