CSS3の境界線

今日は主に CSS3 の境界線について勉強します。これは私たちにとって何回も「border:1px 単色赤」と書いたことがあるでしょう...それでは、CSS3 は私たちにどんな驚きをもたらすでしょうか?

CSS3 では、境界線に 4 つの新しい機能があります

Border-color (境界線の色を設定)

Border-image (画像を通して境界線として設定)

Border-radius (境界線の半径)

box-shadow (影効果)

CSS3を使用すると、デザインプログラムを使用せずに、丸い境界線を作成したり、シャドウボックスや画像を境界線として追加したりすることができます

CSS3の丸い境界線-半径属性

CSS3 の角丸には、border-radius (「境界線の半径」を意味します) という 1 つの属性を設定するだけで済みます。このプロパティに値を指定して、4 隅すべての半径を同時に設定します。すべての法的な CSS 測定値 (em、ex、pt、px、パーセントなど) を使用できます。

      
  
观察4个角的不同 
  

CSS3 box-shadow box-shadow プロパティ

      
  
CSS3 Border-shadow样式
  

CSS3 border-imageBorder-image

      
  
CSS3 Border-image样式