Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css 渐变

作者:风外听竹   发布日期:2025-10-04   浏览:44

/* 线性渐变示例 */
.linear-gradient {
  background: linear-gradient(to right, red, yellow);
}

/* 径向渐变示例 */
.radial-gradient {
  background: radial-gradient(circle, red, yellow);
}

/* 角度渐变示例 */
.angle-gradient {
  background: linear-gradient(45deg, red, yellow, green);
}

解释说明:

  1. 线性渐变 (linear-gradient):

    • to right 表示渐变方向是从左到右。
    • redyellow 是渐变的起始和结束颜色。
  2. 径向渐变 (radial-gradient):

    • circle 表示渐变的形状是圆形。
    • redyellow 是渐变的起始和结束颜色。
  3. 角度渐变 (linear-gradient with angle):

    • 45deg 表示渐变的角度为45度。
    • red, yellow, 和 green 是渐变的颜色序列。

上一篇:css overflow

下一篇:css 隐藏滚动条

大家都在看

css好看的字体

css 红色

css 瀑布流布局grid

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

animation css3

css 自定义滚动条

css 扇形

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站