CSS3 の新機能の概要: 境界線と背景

このシリーズは主に、書籍「CSS Revealed」に基づいた CSS3 のいくつかの新機能の理解をまとめています。

1. 半透明の境界線

CSS3 では、rgba の代わりに hsla を使用するのが最善です: h: 彩度 (0% 〜 100%); l: 明るさ (0%) ~100%); a: 透明度 (0~1)

background-clip: 背景色をクリップします。デフォルトは border-box (背景色は枠線まで広がります)。パディング); content-box (背景色はコンテンツまで拡張されます)

サンプルコード:

width:200px;
height:200px;
background: rebeccapurple;
border: 10px solid hsla(300, 0%, 50%, 0.5);     
background-clip: padding-box; //去掉和添加上此项可以看出效果

2. 複数の境界線の実装

: オブジェクトのシャドウを設定または取得します。形式: box-shadow: none | ;length>{2, 4} && inset?

length<1>: 水平オフセット、負の値

length<2>: シャドウブラー値、負ではない値 値

length<4>: 延長の長さ、負の値

: 影の色

inset: 内側の影として表現され、空は外側の影を意味します

複数の効果セットを設定でき、複数のセットの間で使用します カンマで区切ります (ボックスシャドウとオーバーラップ機能を使用して複数の境界線を設定しますが、境界線のスタイルを縞模様や点線などにすることはできません)

検索テキストの影を設定したい場合は、テキスト-シャドウ属性

outline 2 つの境界線を実現します (2 つの境界線のみを実現できますが、境界線のスタイルは柔軟です)

3. 背景の配置

background-position: 背景の配置、値の説明は次のとおりです

center、left、top、bottom、right などはすべて、背景が表示され始める場所を示します。値は数値またはパーセンテージになります。 20px 下 30px;

background-origin: 背景画像、3 つの値の context-box、padding-box、border-box などの位置パラメータ。幅を計算するための

clac() 関数

サンプルコードは次のとおりです:

background-image: url('../img/bck.png');
background-repeat: no-repeat;
background-size: 40px 40px;
width:200px;
height:200px;
margin-top:10px;
border: 5px solid red;
--background-position: right 0px bottom 0px;
background-origin: content-box;
background-position: calc(100% - 50px);
padding: 10px;

4. 複数の丸い角

box-shadow: 丸い角は境界線の半径に従いますが、輪郭は一致しません。

最小の影（ボックスシャドウ）の計算式は次のとおりです: ピタゴラスの定理、影を設定するときはこの値より大きくなければなりません

サンプルコード:

margin: 10px auto;
width: 10em;
height: 8em;
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #556;