ホームページ > 記事 > ウェブフロントエンド > CSS3ボックスシャドウの使い方

CSS3ボックスシャドウの使い方

php中世界最好的语言オリジナル: 2017-11-24 09:22:201918ブラウズ

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 サイトその他関連記事をご覧ください。