CSS3渐变详解

最新推荐文章于 2023-07-12 18:11:29 发布

我的时区

最新推荐文章于 2023-07-12 18:11:29 发布

阅读量226

点赞数

分类专栏：笔记文章标签： css3

本文链接：https://blog.csdn.net/The_Road_of_Java/article/details/119916243

版权

笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中两种类型的渐变：线性渐变和径向渐变。线性渐变通过指定方向实现颜色平滑过渡，如from right to left。径向渐变则以指定位置为中心向外扩散，可调整形状和尺寸。同时，文中提到了如何使用rgba()函数控制颜色的透明度，并展示了如何创建重复渐变。此外，还讲解了径向渐变的参数设置，包括圆心位置、形状和尺寸控制。

摘要由CSDN通过智能技术生成

渐变(gradient)

线性渐变：一个方向的渐变，可以是由上往下、由下往上、由左往右…
径向渐变：多个方向发散的渐变(可理解为由圆心向外发散)。

线性渐变详解：
语法:background-image:linear-gradient(direction,color1,color2);
- linear-gradient表示线性渐变
- direction表示渐变方向，可以填to left从右向左，to right从左向右，to top从下向上，to bottom从上向下，to top left从右下向左上，to bottom right从左上向右下…
- color1，color2表示渐变颜色，可以有更多个。
- 透明度：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))，rgba()函数最后一个值代表透明度，0表示完全透明，1表示不透明。
重复渐变background-image:repeating-linear-gradient(direction,color1,color2 );

径向渐变详解
语法：background-image:radial-gradient(position,shap,size,color1,color2);
position是圆心定位，就是圆心的位置。
shap是圆的形状，circle是圆，elipse是椭圆(默认)，宽高一致就是正圆。
size是圆的尺寸，只能用四个值设置，closest-side最近边；farthest-side最远边；closest-corner最近角；farthest-corner最远角
color1，color2是颜色渐变的起止色。