CSS3背景渐变
css3新增了一个渐变功能,对应需要渐变的背景可以直接使用css3制作。css3渐变分为两种:线性渐变、径向渐变。线性渐变语法:background: linear-gradient(angle, color-stop1, color-stop2);径向渐变语法:background: radial-gradient(center, shape size, start-color, ..., last-color);
线性渐变
打开html开发工具,新建一个html代码页面
在html代码页面上创建
设置线性渐变。使用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代码页面上创建
设置径向渐变。使用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); }
同类经验分享
- 狗狗耳朵清洁护理有什么方法?11-26
- 钉钉如何设置允许非好友查看我的企业认证信息?11-19
- 如何更好地处理婆媳矛盾11-19
- 萌妆的打造方法11-19
- 家具设计之客厅电视柜家具手绘举例11-17
- 小孩很不听话怎么办?11-17
- 汽车美容知识全攻略11-26
- 怎么做美人鱼手工制作11-26
- 微信6.6怎么关闭搜一搜07-27
- 批量确认收货如何使用11-26
站内热点
- 狗狗耳朵清洁护理有什么方法?11-26
- 钉钉如何设置允许非好友查看我的企业认证信息?11-19
- 如何更好地处理婆媳矛盾11-19
- 萌妆的打造方法11-19
- 家具设计之客厅电视柜家具手绘举例11-17
- 小孩很不听话怎么办?11-17
- 汽车美容知识全攻略11-26
- 怎么做美人鱼手工制作11-26
- 微信6.6怎么关闭搜一搜07-27
- 批量确认收货如何使用11-26
近期更新
- 游泳前准备什么?07-26
- 【红烧鲫鱼】简单做法07-26
- 【藕炒杏鲍菇】简单做法07-26
- 12306如何注册成为积分会员?07-26
- 网上怎么 兼职可以做什么 方式有哪些呢07-26
- 包饺子用什么猪肉07-26
- 美容门店预约小程序有哪些功能07-26
- 怎样培养幼儿良好的生活习惯?07-26
- 漂亮的蝴蝶怎么画07-26
- 装修公司计算装修面积怎么算07-26
- 圆白菜盒子 头菜盒子07-26
- 7种水果养生偏方都是大骗局07-26
版权所有 © 2025 柚子吧经验网 .All Rights Reserved
备案号:赣ICP备2024045721号-1