CSSで横線の影を設定する方法： 1.横線を描画する要素に「width:横線の長さの値、height:横線の太さの値、background:横線の色」のスタイルを追加します。 ; 2. 水平線を追加する 線要素に「box-shadow: 水平方向の影の位置と垂直方向の影の位置;」スタイルを追加して、水平線要素の影を設定します。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
cssで横線の影を設定する方法
前回の記事「cssを使って横線と横線を描画する方法」で、垂直線 "CSS を使用して水平線を描画する方法について説明しましたが、水平線に影を追加する方法を見てみましょう。
CSS では、box-shadow 属性を使用して水平線の影を設定できます。box-shadow 属性は、ボックスに 1 つ以上の影を追加します。
構文は次のとおりです:
box-shadow: h-shadow v-shadow blur spread color inset;
その例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:200px;
height:3px;
background-color:#000;
box-shadow: 10px 5px 5px #888888;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
##(学習ビデオ共有:
以上がCSSで横線の影を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
