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

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

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

用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