CSS3 では box-shadow が boxshadow スタイルワードであることはわかっていますので、今日は box-shadow がどのように使用されるかを見てみましょう
box-shadow スタイルワード: box-shadow
。構文
div{box-shadow:0 0 1px #000 inset;}
は左0、上0、1pxの境界線の間隔を表し、影範囲の影の色は黒(#000)で、insetは影を表します。ボックス内、挿入なしはボックスの外側の影を表します。
注:
box-shadow:0px 0px 1px #000
最初の値が0の場合、左右の境界線の影が1pxの範囲であることを意味します
最初の値は正です整数を表します左の境界線の影
最初の値は、右の境界線の影を表す負の整数です
同様に
2番目の値は、上下の境界線の影を表す0です
2番目の値は、正の整数です上の境界線からの 1px の影の距離を表します
最初の値は負です。整数は下境界線の影の設定
を表し、例として DIV ボックスと pictureIMG にそれぞれ内側の影と外側の影を設定します。
1. Case HTML コード
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象阴影 在线演示 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>盒子对象阴影测试</div> <div class="box">DIV盒子内阴影</div> <div>图片对象阴影测试</div> <div class="box2"><img src="images/div-logo.gif" /></div> </body> </html>
2. Case CSS コード
.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto}
.box2 img {box-shadow:5px 2px 6px #000}CSS3 には非常に多くのボックス シャドウの使用法があります。詳しくは、php 中国語 Web サイトその他関連記事をご覧ください。
関連書籍:
以上がCSS3ボックスシャドウの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
