div+cssの背景グラデーションカラーコードの例-htmlチュートリアル-php.cn

div+cssの背景グラデーションカラーコードの例

PHP中文网

リリース： 2017-03-22 10:12:03

オリジナル

4947 人が閲覧しました

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=&#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);/*Firefox*/

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

HTML5 Canvas: グラデーションカラーを描画

cssボタングラデーションカラー

cssグラデーションカラー省略マーク埋め込みフォントtext 影の詳しい紹介