无效的css[linear-gradient]写法

.loginbox{
background-color: linear-gradient(#D0D0D0, #E0E0E0, white);
width: 300px;
}
  • 此CSS样式无法改变元素的背景色,是因为渐变色在CSS中被定义成了 image 类型,所以渐变色只可以用在需要图形数据的地方。因此linear-gradient在background-color与color中引用无效,要想实现操作可以直接写为background属性
.loginbox{
background: linear-gradient(#D0D0D0, #E0E0E0, white);
width: 300px;
}
  • 如仍然无法显示,考虑浏览器兼容问题
    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); /* 标准的语法(必须放在最后) */

参考链接

未完,待续

关于CSS3背景渐变色无效问题的更多相关文章

  1. css3背景渐变色代码

    从上到下 #grad {  background: -webkit-linear-gradient(red, blue);  background: -o-linear-gradient(red, b ...

  2. CSS3总结二:(background)背景/渐变色函数

    background-color(CSS2) background-image background-position background-size background-repeat backgr ...

  3. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  4. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  5. UIView设置背景渐变色

    UIView设置背景渐变色 // Allocate bitmap context CGContextRef bitmapContext = CGBitmapContextCreate(NULL, , ...

  6. CSS自学笔记(11):CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  7. 第七十九,CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...

  8. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  9. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

随机推荐

  1. Go - 代码生成工具

    分享两个常用的代码生成工具: gormgen handlergen gormgen 基于 MySQL 数据表结构进行生成 3 个文件: 生成表的 struct 结构体 生成表的 Markdown 文档 ...

  2. React源码 commit阶段详解

    转: React源码 commit阶段详解 点击进入React源码调试仓库. 当render阶段完成后,意味着在内存中构建的workInProgress树所有更新工作已经完成,这包括树中fiber节点 ...

  3. Java多态练习题

    需求: 宠物饿了,需要铲屎官给宠物喂食. 不同宠物吃的东西不一样. 不同宠物恢复后体力值不一样. 铲屎官和狗狗玩接飞盘游戏,狗狗健康值减少10,与铲屎官亲密度增加5 铲屎官和 企鹅玩游泳游戏,企鹅健康 ...

  4. CSS基础 和 font字体、背景属性连写 与 清除浮动方法

    1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...

  5. docker 部署mysql服务之后,执行sql脚本

    1,先将.sql文件copy到docker容器里 docker ps //找到容器的短ID或者指定的name. docker inspect  -f '{{.Id}}' id or name 得到指定 ...

  6. VirtualBOX 虚拟机 FreeBSD配置

    pkg装virtualbox-ose-additions, 再将 Section "Device"Identifier "Card0"Driver " ...

  7. 单链表及基本操作(C语言)

    #include <stdio.h> #include <stdlib.h> /** * 含头节点单链表定义及基本操作 */ //基本操作函数用到的状态码 #define TR ...

  8. Python编程中可能经常用到的函数

    1.os.walk() 一般用法为 import os ph=r'D:\temp\build' for root,dirs,files in os.walk(ph): print(root,dirs, ...

  9. CentOS 8.3安装MySQL 8.0.21后无法登录管理数据库

    安装mysql后登录不了,提示: ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) ...

  10. JS 字符数组和数字数组转换

    var newArr = ['1','2','3'].map(Number):// [1,2,3] var newArr =[1,2,3].map(String):// ['1','2','3']