Box Model

• 邊框樣式
  css

.border-examples {
  width: 300px;
  border: 1px solid #ccc;/* 基本邊框 */
  border-top: 2px solid #e74c3c;/*實線*/
  border-right: 1px dashed #3498db;/*虛線*/
  border-bottom: 3px dotted #2ecc71;/*點狀線*/
  border-left: 4px double #f39c12;/*雙線*/
  border-radius: 8px;/* 圓角邊框 */
  border-radius: 10px 5px;
  /* 左上右下10px，右上左下5px */
  border-radius: 15px 5px 10px 0;
  /* 左上15px 右上5px 右下10px 左下0 */
}

html

<div class="border-examples">
  <p>各種不同的邊框樣式展示</p>
  <p>上邊框: 2px實線紅色</p>
  <p>右邊框: 1px虛線藍色</p>
  <p>下邊框: 3px點線綠色</p>
  <p>左邊框: 4px雙線橙色</p>
</div>