JavaEE——css邊框樣式

標籤：Java

聲明：本欄目所使用的素材都是凱哥學堂VIP學員所寫，學員有權匿名，對文章有最終解釋權；凱哥學堂旨在促進VIP學員互相學習的基礎上公開筆記。

邊框樣式

border屬性可以用於控制標籤的邊框樣式，邊框的尺寸使用px為單位。
常用的邊框的線條樣式：
solid 實線
none 無邊框線
double 雙線
dashed 虛線
程式碼範例：

運行結果：

思維導圖：

邊框可以根據上下左右來控制：
border-top 上邊框
border-bottom 下邊框
border-left 左邊框
border-right 右邊框
程式碼範例：

運行結果：

思維導圖：

邊框還可以調整四角的弧度：
border-radius 調整邊框的弧度，單位可以用px和%
把照片的邊框調整成圓形樣本：

運行結果：

調整文字框弧度樣本：

運行結果：

還可以針對四角來調整弧度：
border-bottom-left-radius 調整左下角的弧度
border-bottom-right-radius 調整右下角的弧度
border-top-right-radius 調整右上方的弧度
border-top-left-radius 調整右下角的弧度

程式碼範例：

運行結果：

調整組件的陰影：
box-shadow可以調整組件的陰影面積，也可以設定陰影的顏色：
程式碼範例：

運行結果：

前兩個數值設定為0，就能實作類別似光暈的效果： 程式碼範例：

運行結果：

圖片邊框：border-image
使用此屬性可以將圖片設定到邊框上，末尾可以使用round或stretch來定義圖片圍繞或是展開效果。
程式碼範例：

運行結果：

程式碼範例：

運行結果：

JavaEE——css邊框樣式