ホームページ > 記事 > ウェブフロントエンド > div+cssの背景グラデーションカラーコードの例
div+cssの背景グラデーションカラーコードの例
- PHP中文网オリジナル
- 2017-03-22 10:12:034881ブラウズ
CSS を使用して、IE や Chrome などのブラウザに適した DIV 背景色のグラデーションを作成します。
コード:
<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='#00FF00', endColorstr='#FF0000', GradientType='0');
}
</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);/*Firefox*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from ( #b8c4cb), to(#f6f6f8));/*Google*/
関連記事:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。