Home > Article > Web Front-end > div+css背景渐变色代码示例

div+css背景渐变色代码示例

PHP中文网Original: 2017-03-22 10:12:034880browse

用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器。

代码：

<style type="text/css"> 
.jbkeleyi{ 
height: 300px; 
width:100px; 
margin:0px auto; 
background-image: -moz-linear-gradient(top, #F00, #000); 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(1,#FF0000)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00FF00&#39;, endColorstr=&#39;#FF0000&#39;, GradientType=&#39;0&#39;); 
} 
</style> 
</head>
<body>
用CSS是p颜色渐变：<br />
<p class="jbkeleyi">从绿到红<br /><br />keleyi.com</p>

效果图：

另外多浏览器兼容代码：

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE*/

background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*谷歌*/

HTML5 Canvas：绘制渐变色

css按钮渐变色

css渐变色彩省略标记嵌入字体文本阴影的详细介绍

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS+CSS制作的DIV层最小化和随意拖拽排序功能_html/css_WEB-ITnoseNext article：css笔记一：如何令两个div并排显示_html/css_WEB-ITnose

See more

div+css背景渐变色代码示例

Related articles