关于CSS3线型渐变这些事儿
2024-10-18 21:22:47
CSS3兼容各浏览器的线型渐变方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>线性渐变(linear-gradient)</title>
<style type="text/css">
.gradient{
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .gradient{filter:none;}
</style>
</head>
<body>
<div class="gradient">
垂直渐变
</div> </body>
</html>
如下图所示:
兼容IE哟~~
最新文章
- jQuery全选、全不选、反选
- 关于C语言的问卷调查
- 移植tslib1.4至mini2440
- datagridview 定位到最后一行,定位不准的原因
- python版本升级及pip部署方法
- Hadoop.2.x_WebUV示例
- [linux]删除目录下的一类文件
- Android-Native-Server 启动和注册详细分析
- Python的库和资源(转)
- JPA entity versioning (@Version and Optimistic Locking)
- Android两种为ViewPager+Fragment添加Tab的方式
- a标签的伪元素的应用——link,hover,visited,active
- Android开发支付集成——支付宝集成
- 继承 &; 多态 &; 封装
- C#中的反射 Reflection
- 洛谷水题p1421小玉买文具题解
- leetcode:Reverse Integer 及Palindrome Number
- Java解析Json字符串--复杂对象
- 使用matlibplot.pyplot设置画图的坐标系
- 最受欢迎编程语言又是谁?C语言居首,大数据赢了
热门文章
- 网页中调用Google地图
- js作用域学习
- ASP.NET MVC 3 CheckBoxList 的使用
- Struts2 配置详解
- Web开发的常见面试题HTML和HTML5等
- 如何知道btree树的高度
- UnicodeDecodeError: &#39;ascii&#39; codec can&#39;t decode byte 0xe5 in position 0: ordinal not in range(128)
- html+css复习之第3篇 | jquery | bootstrap
- GMF Q&;A(1): 如何让palette支持拖拽(DnD)等10则
- 监控流量shell脚本