CCSノート
1487 ワード
半透明
cssフィレット
フィレットボーダーを設定するオブジェクトにcssスタイルを設定します.以下のように(IE 9、火狐、Chromeともに可)、前後順に注意
cssボーダーシャドウ
for ie:directionシャドウ角度0°は下から時計回りstrengthシャドウセグメント長
-moz-box-shadow: 2px 2px 10px #909090; -webkit-box-shadow: 2px 2px 10px #909090; box-shadow:2px 2px 10px #909090;
1番目のパラメータはx軸シャドウセグメント長2番目のパラメータはy軸シャドウセグメント長3番目のパラメータは4番目のパラメータはシャドウセグメント色
divコード:
注意:IE 8の影はIE 9とは違います
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE8*/
filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/
opacity: .3; /*Opera9.0+、Firefox1.5+、Safari、Chrome*/
z-index: -1; /* in */
cssフィレット
フィレットボーダーを設定するオブジェクトにcssスタイルを設定します.以下のように(IE 9、火狐、Chromeともに可)、前後順に注意
-moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;
cssボーダーシャドウ
<style type="text/css">
.mydiv{
width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari chrome*/
box-shadow:2px 2px 10px #909090;/*opera ie9*/
}
</style>
for ie:directionシャドウ角度0°は下から時計回りstrengthシャドウセグメント長
-moz-box-shadow: 2px 2px 10px #909090; -webkit-box-shadow: 2px 2px 10px #909090; box-shadow:2px 2px 10px #909090;
1番目のパラメータはx軸シャドウセグメント長2番目のパラメータはy軸シャドウセグメント長3番目のパラメータは4番目のパラメータはシャドウセグメント色
divコード:
<div class="mydiv">
css css css css css css css css css css
</div>
注意:IE 8の影はIE 9とは違います