CSS3特效之渐变:linear-gradient

linear-gradient

语法

  1. <linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
  2. <point>:[ left | right ]? [ top | bottom ]? || <angle>?
  3. <color-stop><color> [ <length> | <percentage> ]?

说明

  1. <point>可取如下值
  2. left:设置左边为渐变起点的横坐标值。
  3. right:设置右边为渐变起点的横坐标值。
  4. top:设置顶部为渐变起点的纵坐标值。
  5. bottom:设置底部为渐变起点的纵坐标值。
  6. <angle>
  7. 用角度值指定渐变的方向(或角度)。
  8. <color-stop>
  9. 指定渐变的起止颜色。

从上到下

  1. .top-bottom{
  2. background:-moz-linear-gradient(top, #e97e00, #f80200);
  3. background:-webkit-linear-gradient:(top, #e97e00, #f80200);
  4. background:linear-gradient:(top, #e97e00, #f80200);
  5. float:left;
  6. }

从左到右

  1. .left-right{
  2. background:-moz-linear-gradient(left, #e97e00, #f80200);
  3. background:-webkit-linear-gradient:(left, #e97e00, #f80200);
  4. background:linear-gradient:(left, #e97e00, #f80200);
  5. }

沿45度方向渐变

  1. .topleft{
  2. background:-moz-linear-gradient(45deg, #e97e00, #f80200);
  3. background:-webkit-linear-gradient:(45deg, #e97e00, #f80200);
  4. background:linear-gradient:(45deg, #e97e00, #f80200);
  5. }
### 语法与基本结构 `linear-gradient` 是 CSS 中用于创建线性渐变背景的函数,其基本语法如下: ```css background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ``` 其中,`direction` 指定渐变方向,可以是关键字(如 `to top`、`to right`)或角度值(如 `45deg`),`color-stop` 表示颜色节点,定义了渐变中不同位置的颜色[^1]。 例如,从上到下的默认渐变可以写为: ```css background-image: linear-gradient(red, yellow); ``` ### 方向设置 方向参数决定了渐变的走向,`linear-gradient` 支持多种方向设置方式。使用关键字时,可以使用 `to top`、`to bottom`、`to left`、`to right` 或其组合(如 `to top right`)来定义方向。例如,从左下到右上的渐变可以写为: ```css background: linear-gradient(to top right, red 0, yellow 50%, transparent 50%, transparent 100%); ``` 如果使用角度,则 `0deg` 表示从下到上,顺时针旋转角度增加。例如,`90deg` 表示从左到右的渐变方向[^5]。 ### 多重渐变与复杂效果 `linear-gradient` 可以与其他渐变函数结合使用,实现复杂的背景效果。例如,结合多个 `linear-gradient` 或与其他渐变(如 `radial-gradient`)组合,可以创建棋盘格、进度条等视觉效果。 一个棋盘背景的实现如下: ```css .qipan { width: 100%; height: 200px; background-image: linear-gradient(45deg, #ccc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #ccc 0), linear-gradient(45deg, #ccc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #ccc 0); background-position: 0 0, -15px 15px, 15px -15px, 30px 30px; background-size: 30px 30px; background-color: white; } ``` ### 重复线性渐变 `repeating-linear-gradient` 用于创建重复的线性渐变,其语法与 `linear-gradient` 类似,但会自动重复渐变模式。例如: ```css .c { background: repeating-linear-gradient(45deg, #55aa7f, #55ff7f 5px, #ffaaff 0, #ff55ff 20px); width: 200px; height: 200px; } ``` ### 实际应用示例 以下是一个简单的线性渐变示例,展示从红色到黄色的渐变背景: ```html <section> <h1>一个简单的 linear-gradient 示例</h1> <div class="b"></div> </section> <style> .b { background: linear-gradient(to top right, red 0, yellow 50%, transparent 50%, transparent 100%); width: 200px; height: 200px; } </style> ``` ### 注意事项 - 在使用 `linear-gradient` 时,确保浏览器兼容性,部分旧版本浏览器可能需要添加前缀如 `-webkit-`。 - 使用 `linear-gradient` 创建的渐变背景可以通过 `background-size`、`background-position` 等属性进一步调整,以实现更精细的布局控制[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值