CSS3のbox-shadow属性の使い方を詳しく解説-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3のbox-shadow属性の使い方を詳しく解説

黄舟

Jul 26, 2017 pm 02:39 PM

box-shadow css3

box-shadow を使用するたびに、対応する効果を実現するために情報を確認する必要があります。後で簡単に参照できるようにここでまとめてみましょう。

1. 構文:

E {box-shadow: inset x-offset y-offset Blur-radius Spread-radius color};
E {box-shadow: 投影モード X 軸のオフセット Y 軸オフセットシャドウブラー半径シャドウ拡張半径シャドウカラー

2. 値:

1. シャドウタイプ: 唯一の値が「inset」の場合、このパラメーターはオプションです。外側のシャドウを内側のシャドウに変換します。

2. オブジェクトの左側。

3. Y オフセット: 値は正または負の値になります。正の値の場合、影はオブジェクトの下部にあります。負の値の場合、影はオブジェクトの上部にあります。

4. シャドウのぼかし半径: このパラメータは、値が正の場合のみ指定できます。 0、影にブラー効果がないことを意味します。値が大きいほど、影のエッジがぼやけます。値が正の場合、影全体が拡大されます。逆に、影全体が縮小されます。 6. 影の色: このパラメータは、色が設定されていない場合、デフォルトの色を使用します。各ブラウザの色は異なります。特に Webkit カーネル下の Safari および Chrome ブラウザは無色、つまり透明になります。このパラメータは省略しないことをお勧めします。

ブラウザ互換の記述

//Firefox4.0- -moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色; //Safari and Google chrome10.0- -webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色; //Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色;

ログイン後にコピー

text-shadow と同様に、box-shadow は 1 つ以上の投影を使用できます。複数の投影を使用する場合は、カンマ ", " を使用する必要があります。別。

IE フィルターはボックスシャドウの影効果をシミュレートします

基本的な構文: filter:progid:DXImageTransform.Microsoft.Shadow(color='color value', Direction=Shadow angle (数値), Strength=Shadow radius (値));

注意

1. このフィルターは背景属性とともに使用する必要があります。そうでない場合、フィルターは無効になります。 2. フィルター内の色属性は完全に記述する必要があり、省略形は使用できません。 ; 3. フィルターの影は幅と高さ内で計算されます

4. ボックスの影の下に、ボックスが自動的に追加されます

5.
一般的に使用される影の実装コード:

<strong><!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>box-shadow的用法</title>
    <style type="text/css">
        p{
            width:60px;
            height:60px;
            margin:40px auto;
            background-color: grey;
        }
        /*右下阴影*/
        .box-shadow-1{
            -webkit-box-shadow: 3px 3px 3px;
            -moz-box-shadow: 3px 3px 3px;
            box-shadow: 3px 3px 3px;
        }
        /*四边同色阴影*/
        .box-shadow-2{
            -webkit-box-shadow:0 0 10px #0CC;
            -moz-box-shadow:0 0 10px #0CC;
            box-shadow:0 0 10px #0CC;
        }
        /*四边同色阴影扩展*/
        .box-shadow-3{
            -webkit-box-shadow:0 0 10px 15px #0CC;
            -moz-box-shadow:0 0 10px 15px #0CC;
            box-shadow:0 0 10px 15px #0CC;
        }
        /*四边同色内阴影*/
        .box-shadow-4{
            -webkit-box-shadow:inset 0 0 10px #0CC;
            -moz-box-shadow:inset 0 0 10px #0CC;
            box-shadow:inset 0 0 10px #0CC;
        }
        /*四边异色外阴影*/
        .box-shadow-5{
            box-shadow:-10px 0 10px red, /*左边阴影*/
            10px 0 10px yellow, /*右边阴影*/
            0 -10px 10px blue, /*顶部阴影*/
            0 10px 10px green; /*底边阴影*/
        }
        /*叠加异色阴影*/
        .box-shadow-6{
            box-shadow:0 0 10px 5px black,
            0 0 10px 20px red;
        }
        /*类border边框效果（只设置阴影扩展半径和阴影颜色）*/
        .box-shadow-7{
            box-shadow: 0 0 0 1px red;
        }
        /*兼容ie*/
        .box-shadow{
            filter: progid:DXImageTransform.Microsoft.Shadow(color=&#39;#969696&#39;,Direction=135, Strength=5);/*for ie6,7,8*/
            background-color: #ccc;
            -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
            -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
            box-shadow:2px 2px 5px #969696;/*opera或ie9*/
        }
    </style></head><body><p class="box-shadow-1"></p><p class="box-shadow-2"></p><p class="box-shadow-3">
    </p><p class="box-shadow-4"></p><p class="box-shadow-5"></p><p class="box-shadow-6"></p><p class="box-shadow-7">
    </p><p class="box-shadow"></p></body></html></strong>

ログイン後にコピー

具体的な効果は下の写真をご覧ください:

以上がCSS3のbox-shadow属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

KB5055612を修正する方法Windows 10にインストールできませんか？
4週間前 By DDD

<🎜>：庭を育てる - 完全な突然変異ガイド
3週間前 By DDD

<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌

Nordhold：Fusion System、説明
4週間前 By 尊渡假赌尊渡假赌尊渡假赌

マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル

1670

14

CakePHP チュートリアル

1428

52

Laravel チュートリアル

1329

25

PHP チュートリアル

1276

29

C# チュートリアル

1256

24

もっと見る

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM
純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM
この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM
2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM
テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM
CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレーススタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM
実装方法: 1. ":active" セレクターを使用して、画像上のマウスクリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。

CSS3でアニメーションの回転速度を設定する方法 Apr 28, 2022 pm 04:32 PM
CSS3 では、「animation-timing-function」属性を使用してアニメーションの回転速度を設定できます。この属性は、アニメーションがサイクルを完了する方法を指定し、アニメーションの速度曲線を設定するために使用されます。構文は「element {アニメーションタイミング関数: 速度属性値;}"。

CSS3 線形グラデーションで三角形を実現できますか? Apr 25, 2022 pm 02:47 PM
CSS3 の線形グラデーションは三角形を実現できます。45 度の線形グラデーションを作成し、そのグラデーションの色を 2 つの固定色 (1 つは三角形の色、もう 1 つは透明色) に設定するだけです。構文 "linear-gradient(45deg, color value) 、カラー値 50%、透明色 50%、透明色 100%)」。

See all articles