CSSで片面シャドウ効果を実現する方法-CSSの知識-php.cn

CSSで片面シャドウ効果を実現する方法

藏色散人

リリース： 2021-01-11 11:20:47

オリジナル

11937 人が閲覧しました

この記事では、HTML/cssの片面シャドウの具体的な実装方法を中心に紹介します。

HTML/CSS の初心者の場合、誰もが境界線の影の効果についてある程度の理解を持っている必要があります。片面シャドウ効果を適切に使用すると、Web ページのコンテンツをより豊かで美しくすることができます。ということで、前回の記事ではcss3枠影効果の実装方法も紹介させていただきました。

推奨参考学習：「CSSチュートリアル」

このセクションでは、html/cssのシングルボーダーシャドウの実装について詳しく紹介します。効果！

単一境界線シャドウを実装するための html/css コード例 は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML/css实现单边框阴影实例</title>
</head>
<style type="text/css">
 .box-shadow {
        width: 200px;
 height: 100px;
 border-radius: 5px;
 border: 1px solid #ccc;
 margin: 20px;
 }

    .top {
        box-shadow: 0 -2px 0 red;
 }

    .right {
        box-shadow: 2px 0 0 green;
 }

    .bottom {
        box-shadow: 0 2px 0 blue;
 }

    .left {
        box-shadow: -2px 0 0 orange;
 }
</style>
<body>
<div  class="box-shadow top"></div>
<div  class="box-shadow right"></div>
<div  class="box-shadow bottom"></div>
<div  class="box-shadow left"></div>

</body>
</html>

ログイン後にコピー

フロントエンドアクセスの効果は次のとおりです:

1. 上の境界線の影 :

CSSで片面シャドウ効果を実現する方法

2. 右の境界線の影:

CSSで片面シャドウ効果を実現する方法

3 .下枠のシャドウ効果:

CSSで片面シャドウ効果を実現する方法

4. 左枠のシャドウ効果:

CSSで片面シャドウ効果を実現する方法

の周囲の 1 つの境界線の影の効果は、上に示すように表示されます。

次に、境界線の影を実装するために使用される主なスタイル属性は次のとおりです:

box-shadow 属性。これは、ボックスに 1 つ以上の影を追加することを意味します。

最初のパラメータは水平方向の影の位置を表し、2 番目のパラメータは垂直方向の影の位置を表し、3 番目のパラメータはぼかし距離を表し、4 番目のパラメータは影の色を表します。

注: boxShadow プロパティは、ボックスに 1 つ以上のドロップダウンシャドウを追加します。このプロパティは、シェードのカンマ区切りリストであり、各シェードは 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。

この記事は、HTML/CSS で単一境界線のシャドウ効果を実現する方法の紹介です。これが必要な友人に役立つことを願っています。

以上がCSSで片面シャドウ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。