无效的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. pandas函数高级

    一.处理丢失数据 有两种丢失数据: None np.nan(NaN) 1. None None是Python自带的,其类型为python object.因此,None不能参与到任何计算中. #查看No ...

  2. 如何优雅的移植JavaScript组件到Blazor

    Blazor作为一个新兴的交互式 Web UI 的框架,有其自身的优缺点,如果现有的 JavaScript 组件能移植到 Blazor,无疑让 Blazor 如虎添翼,本文就介绍一下自己在开发 Bul ...

  3. Qt 自定义 进度条 纯代码

    一 结果图示 二 代码 头文件 #ifndef CPROGRESS_H #define CPROGRESS_H #include <QWidget> #include <QPaint ...

  4. Cup HDU - 2289

    题目传送门:https://vjudge.net/problem/HDU-2289 题意:有一个上口小于底部的圆台形水杯,告诉我们水的体积求水高度. 思路:利用高中数学知识求rr然后二分求h,具体化简 ...

  5. L3-021 神坛 (叉积排序+向量积求面积)

    题目链接 https://pintia.cn/problem-sets/994805046380707840/problems/994805046577840128 题意:给定n个点求三角形最小面积: ...

  6. JVM之基础概念(运行时数据区域、TLAB、逃逸分析、分层编译)

    运行时数据区域 JDK8 之前的内存布局 JDK8 之后的 JVM 内存布局 JDK8 之前,Hotspot 中方法区的实现是永久代(Perm),JDK8 开始使用元空间(Metaspace),以前永 ...

  7. Java之常用API

    API概述 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK 中提供的各种功能的 Java类,这些 ...

  8. Java例题_39 判断奇偶后分数累加

    1 /*39 [程序 39 分数累加] 2 题目:编写一个函数,输入 n 为偶数时,调用函数求 1/2+1/4+...+1/n,当输入 n 为奇数时,调用函数 3 1/1+1/3+...+1/n 4 ...

  9. Tkinter教程系列01——引言和安装Tk

    Tkinter教程系列01--引言和安装Tk 首发于我的个人博客 https://chens.life/tkinter-tutorial-chapter-01-introduction-and-ins ...

  10. 更改当前目录--cd

    pwd   显示当前所在的目录路径 cd ../ 回到上一层目录 cd ../../     回到上上层目录 cd /          回到根目录 cd ~         回到当前用户的根目录 c ...