iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 20
2

Border樣式

所有元素都可以設邊框(border)。今天要介紹的border屬性有:
border-style | border-color | border-width | border-radius

  • border-style 邊框的造型
    參數(value):

    • none 無框線
    • solid 實線樣式
    • dotted 圓點樣式
    • dashed 虛線樣式
    • double 雙線樣式
    • ridge 立體樣式(左上光源)
    • groove 立體樣式(右下光源)
    • inset 立體樣式(內凹)
    • outset 立體樣式(外凸)
  • border-width 邊框的粗細
    參數(value)可以用各種單位表示:

    h1 {
        border-style: solid;
        border-width: 10px; 
    }
    
    p {
        border-style: ridge;
        border-width: 1.5rem; 
    }
    

  • border-color 邊框的顏色
    參數(value)可以用各種色碼表示:

    h1{
        border-style: solid;
        border-width: 10px; 
        border-color: hsl(0 ,100%, 100%);
    }
    
    p {
        border-style: ridge;
        border-width: 20px; 
        border-color: #00ff00;
    }
    

    上列的屬性值可以在同一行內聲明,中間用空格區別:

    h1{
        border: solid 10px hsl(0 ,100%, 100%);
    }
    
    p {
        border: ridge 20px #00ff00;
    }
    
  • border-radius 邊框的圓角
    聲明語法為:
    border-radius: 四個角;
    border-radius: 左上角與右下角 右上角與左下角;
    border-radius: 左上角 右上角 右下角 左下角;
    參數(value)可以是單位也可以是數值,為圓角半徑,若以百分比表示,則是以邊框為基準的百分比為圓角半徑。

    • 以單位為參數值
      • 四個角的圓角半徑為100px。

        div {
          width: 300px;
          height: 300px;
          border: 5px solid #000;
          border-radius: 100px;
        }
        

      • 左上角與右下角圓角半徑100px ; 右上角與左下角圓角半徑50px。

        div {
          width: 300px;
          height: 300px;
          border: 5px solid #000;
          border-radius: 100px 50px; 
        }
        

      • 四個角設不同的圓角半徑。

        div {
          width: 300px;
          height: 300px;
          background-color: #ff00ff;
          border-radius: 5rem 50px 30% 50%;
          }
        

  • border樣式可以針對上下左右個別聲明。

    div {
      border-top: double #000;
      border-right: dotted #000;
      border-bottom: solid #0000ff 20px;
      border-left: solid rgba(234, 234, 123, .5) 10px;
    
      border-top-left-radius: 30%;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 6em;
      border-bottom-left-radius: 50%;
    } 
    

練習看看吧~Try it on codepen.

Outline樣式

outline樣式跟border很類似。但它的特性跟border有些許不同。border如果翻譯為邊框 ; 那outline比較像是輪廓。以下為outline的特性:

  1. outline位置在border的外緣,但不佔用元素的任何空間,這個概念在看完box modle的筆記後再回來思考,可能會更清楚。

  2. outline不能夠聲明單邊樣式,它一定是圍繞呈現的。(而border則可以聲明單邊樣式。)

  3. 根據CSS規範的描述:

    The parts of the outline are not required to be rectangular. To the extent that the outline follows the border edge, it should follow the border-radius curve.

    outline的形狀可以不規則,它會順著border邊緣顯示,不一定得是矩形。可是目前大多數的瀏覽器不支援該特性。實際上驗證之下會發現outline並不會去適應border-radius的圓弧:

    div {
        width: 300px;
        height: 200px;
        border: 10px solid #000;
        border-radius: 20% 60%;
    }
    div {
        outline: 10px solid #f00;
    }
    

  4. 瀏覽器會針對某些元素被focus時,自動生成outline的樣式。這是為了讓使用者在瀏覽網頁時,能感到更加方便、親切。
    比方<input>元素,在被瀏覽器渲染時就會自動生成focus時的outline樣式:

    不過現在很多網頁是用box-shadow來做這個效果,因為更能適應border的形狀。

outline樣式的屬性

outline-style | outline-width | outline-color | outline-offset

基本上除了outline-offset之外,其他的參數設定跟border是一樣的,就不贅述。

  • outline-offset設定outline與border邊緣(或元素box邊緣)的空間。

    .outline {
        outline: 5px dotted #ff00ff;
        outline-offset: 30px;
    }
    

    Try it on codepen.

今天的筆記告一段落,明天見~/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day19 CSS基本樣式-Background(下)
下一篇
Day21 CSS:Box-model
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言