无效的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. Spring-04 Bean的自动装配

    Spring-04 Bean的自动装配 Bean的自动装配 1.自动装配说明 自动装配是使用spring满足bean依赖的一种方法. spring会在应用上下文中为某个bean寻找其依赖的bean. ...

  2. 看完我的笔记不懂也会懂----AngulaJS

    目录 Angular.js学习笔记 ng-app(指令) ng-model ng-init angular之表达式 双向数据绑定 数据流向的总结 作用域对象 控制器对象 依赖对象与依赖注入 命令式与声 ...

  3. 【DB宝41】监控利器PMM的使用--监控MySQL、PG、MongoDB、ProxySQL等

    目录 一.PMM简介 二.安装使用 三.监控MySQL数据库 MySQL慢查询分析 四.监控PG数据库 五.监控MongoDB数据库 六.监控ProxySQL中间件 一.PMM简介 之前发布过一篇Pr ...

  4. ant-design-vue中table自定义列

    1. 使用背景 在项目中使用ant-vue的a-table控件过程中,需要显示序号列或者在列中显示图片,超链,按钮等UI信息.经过查询文档customCell和customRender可以实现以上需求 ...

  5. 漏洞复现-CVE-2015-1427-Groovy远程代码执行

          0x00 实验环境 攻击机:Win 10 靶机也可作为攻击机:Ubuntu18 (docker搭建的vulhub靶场) 0x01 影响版本 Elasticsearch 1.3.0-1.3. ...

  6. window 10 下 --excel | power query 通过 ODBC链接 mysql 数据库

    excel链接到mysql的方法有几种,今天主要介绍如何通过ODBC链接 odbc是 "开放数据库连接",你可以通过下载插件使得自己的excel可以连接到不同的数据库. 关于版本的 ...

  7. 代码审查:从 ArrayList 说线程安全

    本文从代码审查过程中发现的一个 ArrayList 相关的「线程安全」问题出发,来剖析和理解线程安全. 案例分析 前两天在代码 Review 的过程中,看到有小伙伴用了类似以下的写法: List< ...

  8. asp.net core 实现支持自定义 Content-Type

    asp.net core 实现支持自定义 Content-Type Intro 我们最近有一个原本是内网的服务要上公网,在公网上有一层 Cloudflare 作为网站的公网流量提供者,CloudFla ...

  9. Go语言学习笔记——Go语言的make的理解

    实例:https://tour.go-zh.org/moretypes/10 谢大<Go Web编程>书中的讲解https://github.com/astaxie/build-web-a ...

  10. SpringBoot入门学习看这一篇就够了

    1.SpringBoot是什么? SpringBoot是一套基于Spring框架的微服务框架. 2.为什么需要SpringBoot 由于Spring是一个轻量级的企业开发框架,主要的功能就是用于整合和 ...