CSS 渐变-阴影-滤镜【值得收藏】

最新推荐文章于 2024-04-21 10:00:27 发布

VIP文章张浔

最新推荐文章于 2024-04-21 10:00:27 发布

阅读量3.2k

点赞数 6

分类专栏： HTML-CSS-JS 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_58040147/article/details/121038790

版权

文章目录（PS：觉得不错请点赞收藏支持一下）

CSS 渐变
CSS 阴影
CSS 滤镜

CSS 渐变

一、初识 CSS 渐变

CSS 渐变是image类型的一种特殊类型用gradient表示，由两种或多种颜色之间的渐进过渡组成。

三种渐变类型：

线性：由linear-gradient()函数创建
径向：由radial-gradient()函数创建
圆锥：由conic-gradient()函数创建

ps：还可以使用 repeating-linear-gradient()和repeating-radial-gradient()函数创建重复渐变。

渐变可以在任何使用image的地方使用，例如在背景中。

二、CSS 线性渐变

2.1 介绍线性渐变

说明
- 要创建线性渐变，只需指定两种颜色即可，这些被称为色标，至少指定两个色标，还可以设置起点和方向（或角度）以及渐变效果。

语法

background-image: linear-gradient(direction(方向), color1(颜色值), color2(颜色值), ...);

2.2 线性渐变应用

2.2.1 线性渐变 - 从上到下（默认）

代码示例

<style>
    .box {
       
        width: 300px;
        height: 100px;
        background-image: linear-gradient(red, yellow);
    }
</style>

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

效果如下

2.2.2 线性渐变 - 从左到右

代码示例
- ```
background-image: linear-gradient(t
```

最低0.47元/天解锁文章

张浔

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
4
评论
CSS 渐变-阴影-滤镜【值得收藏】

文章目录（PS：觉得不错请点赞收藏支持一下）CSS 渐变一、初识 CSS 渐变二、CSS 线性渐变2.1 介绍线性渐变2.2 线性渐变应用2.2.1 线性渐变 - 从上到下（默认）2.2.2 线性渐变 - 从左到右2.2.3 线性渐变 - 对角线2.2.4 线性渐变 - 设置角度2.2.5 线性渐变 - 使用多个色标2.2.6 线性渐变 - 重复线性渐变三、CSS 径向渐变3.1 介绍径向渐变3.2 径向渐变应用3.2.1 径向渐变-均匀间隔的色标（默认）3.2.2 径向渐变-不同间距的色标3.2.3 径向
复制链接

扫一扫