【无标题】

2022-03-21 16:07:12 阅读：190 来源： 互联网

标签：pink linear gradient 无标题 background 10px red

一、阴影效果

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9