其他分享
首页 > 其他分享> > 【无标题】

【无标题】

作者:互联网

一、阴影效果

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