花里胡哨的前端渐变

最新推荐文章于 2024-07-09 11:52:47 发布

千锋HTML5大前端

最新推荐文章于 2024-07-09 11:52:47 发布

阅读量1.1k

点赞数 1

文章标签：前端 css css3

本文链接：https://blog.csdn.net/sdasadasds/article/details/122125224

版权

本文介绍了CSS中的线性渐变和径向渐变，详细解释了渐变方向、颜色停止点等概念，并展示了不同类型的渐变效果。还探讨了渐变的高级技巧，如颜色突变、渐变叠加、背景平铺、正片叠底效果，以及如何创建渐变色文字和渐变边框，为前端开发者提供了丰富的创意灵感。

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

css中可以进行背景的渐变，通常来说，我们使用的是下面两种渐变

线性渐变
径向渐变
线性渐变
先来看一下语法：

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

解释一下：

angle> 角度值指定渐变的方向（或角度）。
side-or-corner渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or
bottom。关键词的先后顺序无影响，且都是可选的。
color-stop 由一个color值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的length)

于是我们有了下面的效果：在这里插入图片描述

这是一个从左到右的金色到粉色的线性渐变

background-image: linear-gradient(to right, gold, pink)

径向渐变
先来看下语法：

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{
   2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  &