CSS-border-effect_html/css_WEB-ITnose

1.1 Border

その中でも、ボーダーの角丸プロパティとボーダーの影プロパティは広く使われており、比較的互換性が高く、プログレッシブエンハンスメントの原則に則った特性を持っているので、注目していきたいと思います。

1.1.1 ボーダーの角丸処理

border-radius 各角にはx値、y値の2つの値を設定可能

1:ボーダーの角丸処理

2:正方形

border-radius{

width: 200px;

高さ: 200px;

margin: 100px auto;

/*

100px /

border-radius:50px 100px 50px;

//四隅はすべて 100 ピクセルです

border-radius:100px;

//1、3は100px、2、4は50pxを示します

border-radius:100px 50px;

*/

}

3 : 楕円

フィレットを加工する場合、正遠は楕円の特殊なケースであり、円、中心、水平軸、垂直軸の概念を頭の中で形成する必要があります。以下に示すように

「/」で区切って長半径と短半径をそれぞれ設定でき、「1、2、3、4」ルールに従い、最初の 1 ～ 4 は横軸の半径の設定に使用されます ( / 以降のパラメータ 1 ～ 4 は、横軸の 1、2、3、4 の位置に対応）、縦軸の半径（縦軸の 1、2、3、4 の位置に対応）を設定します。それぞれ）

box-影とテキストシャドウの使用法は似ています

1.水平オフセットの正の値は右側にあり、負の値は左にあります

2.垂直の正値offsetは下方向、マイナス値は上方向です

box-shadow: 5px 5px 27lpx red,-5px -5px 27px green;

3. ブラーはマイナスにはできません

4. Insetで内側のシャドウを設定できます

。 item:last-child{

box-shadow:inset 5px 5px 27px red,inset -5px -5px 27px green;

}

ボーダーシャドウを設定してもボックスのサイズは変更されず、レイアウトにも影響しませんその兄弟要素の。複数の境界線と影を設定して、より良い効果を実現し、立体感を高めることができます。

1.1.3 ボーダー画像

border-images:url("iamges/border.png")27px/20pxround

border-imagesはボーダーの背景画像を設定します。

border-images-source:url("") 境界線画像のパスを設定します

//画像のトリミング、画像のトリミング方法、ブラウザが自動的に画像をトリミングします

border-images-slice:27 ,27repeat(repeat)

border-images-repeat:stretch;

設定した画像を9マスの格子状に「カット」して設定します。以下の写真に示すように：。写真

ラウンドと繰り返しの違いは、サイズを自動的に調整し、ボーダーイメージを完全に表示します。 「切り取られて」完全に表示できません。

2.トリミングサイズを変更します

background-slice:34 36 27 27 以下のようにトリミングを設定します

枠線絵のトリミングを理解するためのポイント9

とタイリング方法について, 実際の開発ではあまり使われていませんが、柔軟に活用できると非常に便利になります。

cssで実装した1.1.4の場合

コード実装: