戦闘への取得Webフロントエンド:角の丸いCSS3ボーダー

1. CSS3丸みを帯びました

  • ボーダー-radiusプロパティ

あなたは4枠の最大値を指定することができます- * -複合プロパティの半径のプロパティを、このプロパティは、要素として丸みを帯びた角を追加することができます!
構文:国境半径:1-4の長さ| %/ 1-4長|%;
互換性:IE9 +、FireFox4 +、クロム 、Safari5 +、オペラ

  • 多値

四つの値:左上、右上、右下、左下
三つの値:左上、右上と左下、右下
二つの値:左上と右下、右上と左下
値:同じ4つの丸い角の値を

  • 拡張属性

ボーダー左上半径:それはアークの左上隅定義
ボーダートップ右半径:弧の右上隅定義
ボーダー右下-半径:弧の右下隅定義
ボーダー左下-半径:これは、アークの左下隅を定義します

2. CSS3ボックスシャドウ

  • 箱-shadowプロパティ

一つ以上のドロップシャドウボックスの
構文:ボックスシャドウ:H-V-シャドウ色シャドウぼかしからインセットスプレッド;
(ぼかしファジー値を、スプレッドは、インセットが影に変換することができる拡散値である)
互換性:IE9 +、FireFox4 + 、クロム、Safari5 +、オペラ

3. CSS3ボーダーの写真

  • ボーダー-imageプロパティ

ビルスケーラブルボタン
構文:ボーダー-画像:幅ソーススライス当初繰り返し;
互換性:IE互換性のない、FireFoxの、クロム、Safari6 +、 Operaの互換性がありません

  • 拡張属性

ボーダー・画像ソース:指定あなたが境界線のスタイルがボーダー風の属性によって設定されている代わりに、使用したい画像
構文:ボーダー・画像ソース:なし |画像。

ボーダー・画像-slice:画像は指定された境界オフセット内方
構文:ボーダー・画像スライス:数 |%|塗りつぶし。

ボーダー-画像-width:指定した画像境界線の幅
構文:ボーダー画像幅:数 |%|自動車;

ボーダー像当初:指定外の境界線の量描かれた境界線像面積
構文:ボーダー像当初:長さ |数。

ボーダー・画像・リピート:画像境界を繰り返さなければならない場合には(繰り返し)、ストレッチ(ストレッチ)またはコンフルエント(四捨五入)
構文:ボーダー・イメージリピート:ストレッチ |繰り返し|ラウンド|初期|継承。

おすすめ

転載: blog.51cto.com/14592820/2459097
おすすめ