仿畢卡索畫作

邊框 (border)

• 邊框的三個屬性：寬度(width)、樣式(style)及顏色(color)，舉例用法：
  

#regular-border{
    border: 2px solid ghostwhite;
}

• 當然這都可以拆開，就等同於：

#regular-border{
    border-width: 2px;
    border-style: solid;
    border-color: ghostwhit;
}

• 而邊框的四個方向，都能夠分開設定，例如只設定下方時，可以作出底線：
  

#bottom-border{
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: gold;
}

• 之後做個變形，當元素的寬度為0時，而邊框寬度足夠寬，就可以呈現出梯形或三角形的樣子：
  

#bottom-border{
    width: 0px;
    border-width: 40px;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: gold;
}

• 另外邊框還有"圓弧"(radius)的屬性，而他的值就是一個圓的半徑，值越大弧度就會越大，所以如果圓弧半徑等於邊框寬度時，會出現什麼效果呢。
  

範例codepen

好好的運用邊框，來完成仿畢卡索畫作的任務吧。

下一篇：鋼琴

引用與資源：
freecodecamp
我的仿畢卡索畫作