柚子吧经验网为您提供专业的日常生活经验分享.

柚子吧经验网

为您提供专业的日常生活经验分享

CSS3背景渐变

整理:网友f8a7e4 时间:2025-07-26 阅读:17

css3新增了一个渐变功能,对应需要渐变的背景可以直接使用css3制作。css3渐变分为两种:线性渐变、径向渐变。线性渐变语法:background: linear-gradient(angle, color-stop1, color-stop2);径向渐变语法:background: radial-gradient(center, shape size, start-color, ..., last-color);

线性渐变

打开html开发工具,新建一个html代码页面

在html代码页面上创建

,同时给这个
创建一个class类为linear,用于设置线性渐变背景样式。创建div代码:
线性渐变

设置线性渐变。使用linear-gradient对linear类设置背景渐变样式,为了兼容其他浏览器需要对linear-gradient添加兼容浏览器的前缀。css代码:.linear{ width: 500px; height: 100px; font-size: 20px; color: #fff; text-align: center;  background: -webkit-linear-gradient(left,red, green, blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(left,red, green, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(left,red, green, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(left,red, green, blue); /* 标准的语法 */ }

保存html代码,使用浏览器打开即可看到线性渐变效果。

径向渐变

在html代码页面上创建

,同时给这个
创建一个class类为radial,用于设置线性渐变背景样式。创建div代码:
径向渐变

设置径向渐变。使用linear-gradient对linear类设置背景渐变样式,为了兼容其他浏览器需要对linear-gradient添加兼容浏览器的前缀。css样式代码:.radial{  background: -webkit-radial-gradient(60% 55%, closest-side,green,yellow,black);   background: -o-radial-gradient(60% 55%, closest-side,green,yellow,black);  background: -moz-radial-gradient(60% 55%, closest-side,green,yellow,black);  background: radial-gradient(60% 55%, closest-side,green,yellow,black); }

保存html代码,使用浏览器打开即可看到径向渐变效果。

页面所有代码。可以直接复制所有代码粘贴到新建html页面,保存后使用浏览器打开即可看到效果。所有代码: css3渐变 div{ width: 500px; height: 100px; font-size: 20px; color: #fff; text-align: center; margin-bottom: 30px; } .linear{  background: -webkit-linear-gradient(left,red, green, blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(left,red, green, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(left,red, green, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(left,red, green, blue); /* 标准的语法 */ } .radial{  background: -webkit-radial-gradient(60% 55%, closest-side,green,yellow,black);   background: -o-radial-gradient(60% 55%, closest-side,green,yellow,black);  background: -moz-radial-gradient(60% 55%, closest-side,green,yellow,black);  background: radial-gradient(60% 55%, closest-side,green,yellow,black); }

线性渐变
镜像渐变

同类经验分享

站内热点

近期更新

版权所有 © 2025 柚子吧经验网 .All Rights Reserved
备案号:赣ICP备2024045721号-1