一分钟前台|CSS实现背景色渐变

  • 时间:2018-10-04 23:17 作者:前端科技 来源:前端科技 阅读:210
  • 扫一扫,手机访问
摘要:最近写了很多H5页面,在完成产品经理要求的过程中遇到了很多问题。国庆假期想着梳理一下最近用到的知识点,一分钟学会一个前台技能点。想想也很超值,反正哪里都是堵车,学点东西也是挺好的。今天先说一下CSS渐变背景色的实现,产品小姐姐要求按钮的颜色是绚丽的渐变色,所以我也去查了一下实现。用到的属性自然还是b

最近写了很多H5页面,在完成产品经理要求的过程中遇到了很多问题。国庆假期想着梳理一下最近用到的知识点,一分钟学会一个前台技能点。想想也很超值,反正哪里都是堵车,学点东西也是挺好的。

一分钟前台|CSS实现背景色渐变

今天先说一下CSS渐变背景色的实现,产品小姐姐要求按钮的颜色是绚丽的渐变色,所以我也去查了一下实现。

用到的属性自然还是background,语法是background: linear-gradient(direction, color-stop1, color-stop2, ...);

这个属性可以实现从上到下,从左到右,左上角到右下角,甚至自己设置渐变角度的渐变方向。我们常用的就是从上到下和从左到右渐变。

从上到下渐变:

#grad {

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 标准的语法 */

}

从左到右渐变:

#grad {

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法 */

}

关于CSS渐变色就和大家详情到这里,你GET到了吗?欢迎点赞,评论,转发。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】百度网盘如何加入群组(2021-03-01 21:29)
【系统环境|windows】Axios 取消重复请求(2020-11-08 07:00)
【系统环境|windows】熬了一晚上,小白用Python写了一个股票提示系统(2020-11-08 07:00)
【系统环境|windows】2020要想成为一名专业的web前台开发程序员,需要学习什么?(2020-11-08 06:35)
【系统环境|windows】前台面试每日 3+1 —— 第546天(2020-11-08 06:34)
【系统环境|windows】聊聊前台工程师的职业发展 (纯干货)(2020-11-08 06:34)
【系统环境|windows】浅谈OAuth 2.0基本原理(2020-11-08 06:34)
【系统环境|windows】程序员初入职场避坑指南(2020-11-08 06:34)
【系统环境|windows】python的绘图利器--海龟绘图turtle(2020-11-08 06:33)
【系统环境|windows】pyinstaller打包结果瘦身(2020-11-08 06:33)
血鸟云
手机二维码手机访问领取大礼包
返回顶部