div+cssバックグラウンドグラデーションコードの例
5021 ワード
ブログに移行しました萌えるIT人、ありがとうございます
--------------------------------------------------
CSSでDIVバックグラウンドカラーをグラデーションし、I EやChromeなどのブラウザに適用します.
黄色から赤の例:http://keleyi.com/keleyi/phtml/divcss/2.htmコード:
<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 div ：<br />
<div class="jbkeleyi"> <br /><br />keleyi.com</div> 効果図:
追加のマルチブラウザ互換コード:
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));/*Google*/
詳細については、「http://keleyi.com/a/bjac/cp4alo5k.htm」を参照してください.