无效的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. 设计模式之工厂方法模式(Factory Method Pattern)

    一.工厂方法模式的诞生 在读这篇文章之前,我先推荐大家读<设计模式之简单工厂模式(Simple Factory Pattern)>这篇文档.工厂方法模式是针对简单工厂模式中违反开闭原则的不 ...

  2. C#使用OpenCV剪切图像中的圆形和矩形

    前言 本文主要介绍如何使用OpenCV剪切图像中的圆形和矩形. 准备工作 首先创建一个Wpf项目--WpfOpenCV,这里版本使用Framework4.7.2. 然后使用Nuget搜索[Emgu.C ...

  3. Tomcat8弱口令+后台getshell

    漏洞原因 用户权限在conf/tomcat-users.xml文件中配置: <?xml version="1.0" encoding="UTF-8"?&g ...

  4. jdk 集合大家族之Collection

    jdk 集合大家族之Collection 前言:   此处的集合指的是java集合框架中的实现了Collection接口相关的类.所以主要为List Set 和 Queue 其他章节会专门介绍Map相 ...

  5. ElasticSearch 进阶

    目录 ElasticSearch 进阶 SearchAPI 检索信息 Query DSL 基本语法格式 查询-match 查询-match_phrase 查询-multi_match 查询-bool复 ...

  6. 鸿蒙OS前端开发入门指南:网络图片_Image渲染网络图片

    目录: 1.开启明文传输 2.权限申请 3.引入http插件 4.案例展示 5.<鸿蒙OS前端开发入门指南>文章合集 开启明文传输 在config.json配置文件添加如下配置(如果不开启 ...

  7. 谈谈C++中的数据对齐

    对于C/C++程序员来说,掌握数据对齐是很有必要的,因为只有了解了这个概念,才能知道编译器在什么时候会偷偷的塞入一些字节(padding)到我们的结构体(struct/class),也唯有这样我们才能 ...

  8. 关于python浮点数精度问题计算误差的原因分析

    在python中使用浮点数运算可能会出现如下问题 a = 0.1+0.2print(a) 输出的结果是 0.30000000000000004 原因如下: 出现上面的情况,主要还是因浮点数在计算机中实 ...

  9. jQuery学习笔记(2) jQuery选择器

     jQuery的选择器完全继承了CSS的风格,利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为. 目录 目录 CSS选择器 jQuery选择器 jQuery选 ...

  10. 攻防世界 reverse easy_Maze

    easy_Maze 从题目可得知是简单的迷宫问题 int __cdecl main(int argc, const char **argv, const char **envp) { __int64 ...