Heim >Web-Frontend >HTML-Tutorial >div+css背景渐变色代码示例

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

PHP中文网
PHP中文网Original
2017-03-22 10:12:035009Durchsuche

用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渐变色彩 省略标记 嵌入字体 文本阴影的详细介绍

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn