关于CSS3背景渐变色无效问题
无效的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背景渐变色无效问题的更多相关文章
- css3背景渐变色代码
从上到下 #grad { background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, b ...
- CSS3总结二:(background)背景/渐变色函数
background-color(CSS2) background-image background-position background-size background-repeat backgr ...
- css3 背景记
css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...
- CSS3背景温故
1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...
- UIView设置背景渐变色
UIView设置背景渐变色 // Allocate bitmap context CGContextRef bitmapContext = CGBitmapContextCreate(NULL, , ...
- CSS自学笔记(11):CSS3背景和边框
CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
- 第七十九,CSS3背景渐变效果
CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- 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 ...
随机推荐
- pandas函数高级
一.处理丢失数据 有两种丢失数据: None np.nan(NaN) 1. None None是Python自带的,其类型为python object.因此,None不能参与到任何计算中. #查看No ...
- 如何优雅的移植JavaScript组件到Blazor
Blazor作为一个新兴的交互式 Web UI 的框架,有其自身的优缺点,如果现有的 JavaScript 组件能移植到 Blazor,无疑让 Blazor 如虎添翼,本文就介绍一下自己在开发 Bul ...
- Qt 自定义 进度条 纯代码
一 结果图示 二 代码 头文件 #ifndef CPROGRESS_H #define CPROGRESS_H #include <QWidget> #include <QPaint ...
- Cup HDU - 2289
题目传送门:https://vjudge.net/problem/HDU-2289 题意:有一个上口小于底部的圆台形水杯,告诉我们水的体积求水高度. 思路:利用高中数学知识求rr然后二分求h,具体化简 ...
- L3-021 神坛 (叉积排序+向量积求面积)
题目链接 https://pintia.cn/problem-sets/994805046380707840/problems/994805046577840128 题意:给定n个点求三角形最小面积: ...
- JVM之基础概念(运行时数据区域、TLAB、逃逸分析、分层编译)
运行时数据区域 JDK8 之前的内存布局 JDK8 之后的 JVM 内存布局 JDK8 之前,Hotspot 中方法区的实现是永久代(Perm),JDK8 开始使用元空间(Metaspace),以前永 ...
- Java之常用API
API概述 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK 中提供的各种功能的 Java类,这些 ...
- Java例题_39 判断奇偶后分数累加
1 /*39 [程序 39 分数累加] 2 题目:编写一个函数,输入 n 为偶数时,调用函数求 1/2+1/4+...+1/n,当输入 n 为奇数时,调用函数 3 1/1+1/3+...+1/n 4 ...
- Tkinter教程系列01——引言和安装Tk
Tkinter教程系列01--引言和安装Tk 首发于我的个人博客 https://chens.life/tkinter-tutorial-chapter-01-introduction-and-ins ...
- 更改当前目录--cd
pwd 显示当前所在的目录路径 cd ../ 回到上一层目录 cd ../../ 回到上上层目录 cd / 回到根目录 cd ~ 回到当前用户的根目录 c ...