css 境界線の影を追加

CSSボーダーシャドウを設定するには?

文法：

<style>
box-shadow: h-shadow v-shadow blur spread color inset;
</style>

価値：

h-shadow: 水平方向の影の位置を定義するために設定する必要がある値。負の値を使用できます。
v-shadow: 垂直の影の位置を定義するために設定する必要がある値。負の値を使用できます。
blur: オプションで値を設定して、ぼかし距離を定義します。
spread: 影のサイズを定義するオプションの設定値。
color : 影の色を定義するオプション設定の値。値が設定されていない場合、色の値はブラウザの表示に基づいているため、設定することをお勧めします。
インセット: オプションの設定値、

例

X 軸と Y 軸は正の値に設定されます (正の値 X 軸右 Y 軸下)

<style>
box-shadow:4px 4px 15px #f00;
</style>

1: テキストの影
1. 属性: text-shadow
2. 属性値: 一般的に使用される 4 つの属性値があります
- 最初の属性値は水平方向を示します
- 2 番目の属性値は垂直方向を示します
- 3 番目の属性値は垂直方向を示しますぼかしの度合い
- 4 番目の属性値は色を表します

2: ボックスシャドウ
1. 属性: ボックスシャドウ
2. 属性値: 4 つの共通の属性値があります
- 最初の属性値は水平方向を示します
- 2 番目の属性値は垂直方向を示します
- 3 番目の属性値は角度を示しますof blur
- 4 番目の属性値は色を表します
- 5 番目の属性値は 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>
        div{
            text-shadow: 0 0 1px red;
        }
        p{
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        p{
            box-shadow:0 0 2px #000;
        }
    </style>
</head>
<body>
    <div>
        文本内容
    </div>
    <p></p>
</body>
</html>

ボーダーの角丸属性の使用
1. 属性: border-radius (radius)
2. 属性値
- 1 つの属性値: 幅と高さを半分/50%~100% に設定して円を形成します
- 2 つの属性値: 左上コーナー、右下コーナー、右上コーナー、左下コーナーコーナー
- 3 つの属性値: 左上コーナー、右上コーナー、左下コーナー、右下コーナー
- 4 つの属性値: 左上、右上、右下、左下
- 8 つの属性値: 左上 x 右上 x 右下 x 左下 x/左上 y 右上 y 右下 y 左下 y

<!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>
        div{
            width: 300px;
            height: 300px;
            background: pink;
            margin: 200px auto;
            border-radius: 10px 10px 10px 10px/10px 10px 10px 10px
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景サイズの設定
1. 属性: background-size
2. 属性値:
- 最初のタイプ: 固定の幅と高さを 100px 200px に設定
- 2 番目のタイプ: 100% 100% は、パーセンテージが計算に対して塗りつぶされることを意味します親要素親ボックス
- 3 番目のタイプ: 100% 自動
- 4 番目のタイプ: カバーカバレッジ (画像を変形しませんが、画像がそれを超えるとトリミングされます)
- 5 番目のタイプ: カバーを含む (特定の側面が親レベルに接触すると、ボックスが変化しなくなり、変形またはトリミングされなくなります)

<!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>
        div{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.7oOC6JBP9YBcN48LmPd1tQAAAA?pid=ImgDet&rs=1);
            background-repeat: no-repeat;
            background-size:contain
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

おすすめ