Home > Web Front-end > HTML Tutorial > div css background gradient color code example

div css background gradient color code example

PHP中文网
Release: 2017-03-22 10:12:03
Original
5004 people have browsed it

Use CSS to make the DIV background color gradient, suitable for browsers such as IE and Chrome.

Code:

<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>
Copy after login

Rendering:

In addition, multi-browser compatible code:

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

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

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

Related articles:

HTML5 Canvas: Draw gradient color

css button gradient color

css gradient color omitted Detailed introduction to mark embedded font text shadow

Related labels:
source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template