CodeGym /Java Adesua /Frontend SELF TW /邊框

邊框

Frontend SELF TW

等級 19 , 課堂 2

開放

8.1 屬性 border

邊框是網頁設計的重要一環。它們可以幫助突出元素並改善頁面的視覺效果。CSS 提供許多屬性來創建和設計邊框。讓我們來看看邊框的主要屬性，包括壓縮與完整語法，以及設定寬度、風格、顏色和圓角的屬性。

主要參數

邊框的主要參數可透過使用單獨的屬性來設定：border-width, border-style 和 border-color。

語法：

    
      element {
        border-width: width;
        border-style: style;
        border-color: color;
      }

使用範例：

CSS

    
      .border-full {
        border-width: 2px;
        border-style: solid;
        border-color: red;
      }

簡潔語法

屬性 border 可以在一行中設定邊框的所有主要參數（寬度、風格和顏色）。

語法：

    
      element {
        border: width style color;
      }

CSS

    
      .border-compact {
        border: 2px solid red;
      }

      .border-full {
        border-width: 2px;
        border-style: solid;
        border-color: red;
      }

HTML

    
      <body>
        <div class="border-compact">簡潔語法</div>
        <div class="border-full">完整語法</div>
      </body>

8.2 邊框寬度: border-width

屬性 border-width 設定邊框的寬度。該值可以是像素 (px)、點 (pt)、百分比 (%) 或關鍵字 (thin, medium, thick)。

語法：

    
      element {
        border-width: width;
      }

範例：

CSS

    
      .border-thin {
        border: thin solid black;
      }

      .border-medium {
        border: medium solid black;
      }

      .border-thick {
        border: thick solid black;
      }

      .border-custom {
        border-width: 5px;
        border-style: solid;
        border-color: black;
      }

HTML

    
      <body>
        <div class="border-thin">細邊框</div>
        <div class="border-medium">中等邊框</div>
        <div class="border-thick">粗邊框</div>
        <div class="border-custom">5px 寬的邊框</div>
      </body>

8.3 邊框風格: border-style

描述：

屬性 border-style 設定邊框的風格。可選風格包括：

none: 無邊框
solid: 實線
dotted: 點線
dashed: 虛線
double: 雙線
groove: 槽紋邊框
ridge: 山脊邊框
inset: 嵌入邊框
outset: 凸起邊框

語法：

    
      element {
        border-style: style;
      }

範例：

CSS

    
      .border-none {
        border: 2px none black;
      }

      .border-solid {
        border: 2px solid black;
      }

      .border-dotted {
        border: 2px dotted black;
      }

      .border-dashed {
        border: 2px dashed black;
      }

      .border-double {
        border: 4px double black;
      }

      .border-groove {
        border: 4px groove black;
      }

      .border-ridge {
        border: 4px ridge black;
      }

      .border-inset {
        border: 4px inset black;
      }

      .border-outset {
        border: 4px outset black;
      }

HTML

    
      <body>
        <div class="border-none">無邊框</div>
        <div class="border-solid">實線</div>
        <div class="border-dotted">點線</div>
        <div class="border-dashed">虛線</div>
        <div class="border-double">雙線</div>
        <div class="border-groove">槽紋邊框</div>
        <div class="border-ridge">山脊邊框</div>
        <div class="border-inset">嵌入邊框</div>
        <div class="border-outset">凸起邊框</div>
      </body>

8.4 邊框顏色: border-color

屬性 border-color 設定邊框的顏色。顏色可以用多種格式指定：顏色名稱、十六進制代碼、RGB、RGBA、HSL、HSLA。

語法：

    
      element {
        border-color: color;
      }

CSS

    
      .border-red {
        border: 2px solid red;
      }

      .border-blue {
        border: 2px solid blue;
      }

      .border-green {
        border: 2px solid green;
      }

      .border-rgba {
        border: 2px solid rgba(255, 0, 0, 0.5);
      }

HTML

    
      <body>
        <div class="border-red">紅色邊框</div>
        <div class="border-blue">藍色邊框</div>
        <div class="border-green">綠色邊框</div>
        <div class="border-rgba">半透明紅色邊框</div>
      </body>

8.5 圓角處理: border-radius

屬性 border-radius 可以圓角化元素的角以創建圓角邊框。可以同時應用於所有四個角或各個角。

語法：

    
      element {
        border-radius: radius;
      }

值：

單一值: 例如，border-radius: 10px; — 對所有角設定相同的圓角半徑
兩個值: 例如，border-radius: 10px 20px; — 第一個值適用於左上和右下角，第二個適用於右上和左下角
四個值: 例如，border-radius: 10px 20px 30px 40px; — 分別為左上、右上、右下和左下角設定圓角半徑
混合值: 半徑可以用百分比設定，這使得圓角可以根據元素大小自適應

範例：

CSS

    
      .radius-all {
        border: 2px solid black;
        border-radius: 15px;
        padding: 10px;
        margin: 10px;
      }

      .radius-top {
        border: 2px solid red;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: 10px;
        margin: 10px;
      }

      .radius-bottom {
        border: 2px solid blue;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        padding: 10px;
        margin: 10px;
      }

      .radius-mixed {
        border: 2px solid green;
        border-radius: 10px 20px 30px 40px;
        padding: 10px;
        margin: 10px;
      }

HTML

    
      <body>
        <div class="radius-all">所有角圓角處理</div>
        <div class="radius-top">頂部角圓角處理</div>
        <div class="radius-bottom">底部角圓角處理</div>
        <div class="radius-mixed">混合圓角處理</div>
      </body>