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

php中世界最好的语言
リリース: 2017-11-24 09:22:20
オリジナル
1892 人が閲覧しました

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

関連書籍:

HTML で DIV が重なっている場合の対処方法

HTML の br、p、DIV の違いは何ですか

HTML で絶対パスと相対パスを使用する方法

以上がCSS3ボックスシャドウの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!