css3 UIの変更 - レビュー

1.box-shadow プロパティは、ボックスに 1 つ以上の影を追加します。
構文: box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット
h-shadow は必須で、水平方向のシャドウの位置、負の値が許可されます。
v-shadowは必須、垂直影の位置、負の値も許容されます。
blur オプションのぼかし距離。
スプレッドオプション、影のサイズ。
color オプション、影の色。
insetはオプションで、外側のシャドウ（アウトセット）をコンテンツのステップシャドウに変更します。
例:
;/style>
< ;p class="shadow">
lt;style>
.shadow {width: 300px; height: 150px; margin: 0 auto; gt;
結果: として図に示す

2.border-radius

要素は丸い境界線を追加します。
構文: border-radius: 1-4 length | % / 1-4 length | %;
注: 4 つの値の順序は、左上隅、右上隅、右下隅、左下隅です。
border-radius: 2em 1em 4em / 0.5em 3em;
以下と同等:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;

border-bottom-right-radius; :4em 0.5em;

border-bottom-left-radius:1em 3em; border-radius はパーセント値 %

をサポートします 例:

結果： picer






3.border-image


要素の境界線背景
プロパティの設定に使用されます:
border-image-source 境界線で使用される画像のパス
border-image-slice 画像の境界線は内側にオフセット
border -image-width 画像の境界線の幅
border-image-outset 境界線を越える境界線画像の領域の量
border-image-repeat 画像の境界線をタイル状に並べる（繰り返す）かどうか
丸めます（デフォルトでは丸められる）または引き伸ばされる（ストレッチ）。

ボーダーは、border-imageを9つの部分に分割します: border-top-image, border-right-image

border-bottom-image, border-left-image, border-top-left-image border-top-right- image , border-bottom-left-image,

dedendy dedendy . height:100px;border:1em double orange;border-image:url(1.png) 27;}

結果: 下記の通り

;

width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27repeat;}

結果：図の通り

4.

gradient Gradient

Linear-gradient（線形グラデーション）とradial-gradient（放射状グラデーション）に分かれます

Linear-gradient
構文背景: -webkit-linear-gradient( top ,#ccc,#000);

パラメータ: 合計 3 つのパラメータがあり、Top は上から下への方向を表します。左から右へ。左上と定義されている場合は、左上隅から右下隅までです。

2番目と3番目のパラメータはそれぞれ始点の色と終点の色です。 例:

< p class = "gradient"> background:-webkit -linear-gradient (45deg, 赤 50px、黄 200px);}

結果: 下記の通り

radial-放射状のグラデーション。
グラデーションの形状は、 ellipse (楕円を表す) farthest-corner (最も遠い隅を表す) です
構文:radial-gradient (red, green, blue);
例:

結果：図の通り

例：異なるサイズのキーワードの使用。 side,blue,green, yellow,black);}
< /style>

結果：図の通り

放射状の繰り返しgradient

Repeating-radial-gradient() 関数は、放射状のグラデーションを繰り返すために使用されます 例:

.gradient{width:300px height: 15%);}

x;height: 25px;
オーバーフロー：隠された;境界：1px
ソリッド＃000;} .box {width：400px; height：30px; #fff 10px,# fff
20px);transition:3s;}
.wrap:hover .box{ margin-
left:-100px;}

結果: 示されているとおり

5

.background-origin


背景の基準となる位置を指定しますPosition 属性は位置決めされます
構文:background-origin:padding-box|border-box|content-box;
padding-box 背景画像はパディングボックスを基準に位置決めされます。
border-boxの背景画像は高価すぎます
content-boxの背景画像はコンテンツボックスを基準に配置されています
例: