Webフロントエンドの記事：CSSプロパティの背景と境界のプロパティ

背景プロパティ値

プロパティ値	プロパティ値	説明
背景色	方法D片側色、RGB、進	背景色の要素を集合s
背景画像	URL（「wy.png」）	要素または背景画像を複数に設けられています。
背景位置	上、左、中央、割合、PX	背景画像のそれぞれについて、初期位置を設定します。
背景repreat	リピート-X	繰り返し-Y

背景画像は、背景画像を設定します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            width: 400px;
            height: 400px;
            border:1px solid blue;
            background-image:url("wy.jpg")
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>

背景リピート背景画像

プロパティ値：

数値	説明
繰り返す	デフォルト値。背景タイル、水平方向と垂直方向の両方を表します
何のリピートありません	水平方向及び処分を示す図で背景をタイル張りされていません
リピート-X	これは、水平方向のみ背景タイルを表し、
繰り返し-Y	垂直方向にタイル張りの背景のみを表し

無料情報やコースを受け取るにはクリック

.bg{
    width: 1000px;
    height: 1000px;
    border:1px solid blue;
    background-image:url("sj6.jpg");
    background-repeat:repeat-x;/*沿着轴方向平铺*/
}

bacground位置測位背景

構文：

background-position:x y;
background-position:position position

値

关键字取值：
    top ,right,bottom,left,center
长度值取值：
    px,em
百分比：
    50%

例

background-position:0 0;
/*左上角显示*/

background-position:top right; /*背景图像在右上角*/

background-position:top center; /*背景图像上方居中显示*/

background-position:center center;/*背景图像居中显示*/

長さの単位を設定します：

background-position:50px 100px;

負の値に設定されています：

background-position:-20px -30px;

図2.スプライト

図CSSスプライト技術：CSSスプライトは、また、CSSスプライトと呼ばれていた、それは画像のモザイク技術です。この方法は、小さなアイコンと背景画像の複数の画像にマージし、次に表示すべき背景画像CSSの位置決め部を表示するために使用されます。

無料情報やコースを受け取るにはクリック

利点：
- 効果的なHTTPリクエストの数を減らします
- コンテンツを加速
原則スプライトマップ
- これはCSSの背景特性のスプライト図のbackrground位置によって表示を制御します。
- 制御層は、広い範囲の領域がウィンドウを介してメッセージを表示することができ、背景が動きます。

3.border半径

伝統的なフィレット生成スキームは、背景パターンとして複数の画像を使用しなければなりません。CSS3は、我々は、もはやこれらの写真を作るために時間を無駄にする必要はないように見える、と他の多くの利点があります。
- メンテナンスの負担を軽減。生成された画像ファイル、更新、コードページは、これらのジョブはもはや必要ありません。
- ページのパフォーマンスを向上させます。もはや速く、ページの読み込み速度をHTTPリクエストを複数有します
- ビジョンの信頼性を高めます。（ネットワークの輻輳、サーバーエラーが、スピード等、遅すぎる）、背景画像が悪い視覚効果をもたらし、失敗したダウンロードされます。CSS3は発生しません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bor-radius{
            width: 400px;
            height: 400px;
            border-radius:20px;
            background-color: red;
    }
    </style>

</head>
<body>
    <div class="bor-radius"></div>
</body>
</html>

次のように表示します。
シングルアングル設定：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- 示例：
```
border-bottom-left-radius：
```

border-radius效果实现一个无边框圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cicle{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius:50%;
        }
    </style>

</head>
<body>
    <div class="cicle"></div>
</body>
</html>

制作一半的圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cicle{
            width: 200px;
            height: 100px;
            background-color: red;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
        }
    </style>

</head>
<body>
    <div class="cicle"></div>
</body>
</html>

点击领取免费资料及课程

4.盒子阴影

通过box-shadow属性设置元素的阴影

语法：

box-shadow: h-shadow v-shadow blur color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

        .bg{
            width: 400px;
            height: 400px;
            border:1px solid blue;
            background-image:url("sj6.jpg");
            background-repeat:no-repeat;
            background-position:50px 100px;
            box-shadow:5px 5px 20px red;
        }

6.网页中规范和错误问题

css命名规范：

点击领取免费资料及课程

项目目录规范：
确定错误位置
- 假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。这样我们可以更精准的找到错误点，进行排错。
是否重设了默认的样式?
- 制作网页时，我们要清除掉默认的元素的padding和margin，使得我们更易去计算盒模型的大小。

Webフロントエンドの記事：CSSプロパティの背景と境界のプロパティ

図2.スプライト

3.border半径

4.盒子阴影

6.网页中规范和错误问题

おすすめ