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

最新推荐文章于 2024-07-07 12:23:15 发布

张浔

最新推荐文章于 2024-07-07 12:23:15 发布

阅读量3.4k

点赞数 6

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

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

版权

本文详细介绍了CSS的渐变、阴影和滤镜，包括线性、径向和圆锥渐变的创建及应用，阴影的属性使用，以及滤镜的各种方法，如模糊、亮度和对比度等，帮助提升网页视觉效果。

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

文章目录（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(to right, red, yellow);

效果如下

2.2.3 线性渐变 - 对角线

代码示例

background-image: linear-gradient(to bottom right, red, yellow);

效果如下

2.2.4 线性渐变 - 设置角度

说明
- 如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。
- 在使用角度的时候, 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。而负角度意味着逆时针方向。

代码示例

background-image: linear-gradient(180deg, red, yellow);

效果如下

2.2.5 线性渐变 - 使用多个色标

代码示例

background-image: linear-gradient(red, yellow, green);

效果如下

2.2.6 线性渐变 - 重复线性渐变

说明
- repeating-linear-gradient() 函数用于重复线性渐变。

代码示例

background-image: repeating-linear-gradient(red, yellow 10px);

效果如下

三、CSS 径向渐变

3.1 介绍径向渐变

说明

最低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 径向
复制链接

扫一扫