Home >Web Front-end >HTML Tutorial >CSS implements color gradient effect under different browsers_html/css_WEB-ITnose

CSS implements color gradient effect under different browsers_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:43:501874browse

I want to make a giant screen for the homepage, but I don’t want to use pictures, which will slow things down a bit. Solid colors are quite ugly, so I had to try the gradient effect. CSS 3 has good color gradient support. To cope with some old browsers, it still requires a few lines of code.

is organized as follows:

    background-image: -moz-linear-gradient(top, #ff4f02, #8f2c00);    /* Firefox */        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #800000));    /* Safiri 4+, Chrome */        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4f02',endColorstr='#8f2c00');    /* IE 6 7 8 9 */        background: -ms-linear-gradient(top, #ff4f02, #8f2c00);    /* IE 10 */

The effect is purple:


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