iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
1
Modern Web

~網頁入門~系列 第 17

Day17-HTML(13) – CSS盒子模式(下)

上次提到設定 border 的樣式,這次接著繼續說下去~

我們可以用一行來設定所有樣式

p{
      border: thick orange dashed;
 }

https://ithelp.ithome.com.tw/upload/images/20191003/20120959TRv06FxL2v.jpg

另外,如果不想要邊框方方正正的,可以使用border-radius來設定邊框圓角半徑值

p{
     border: solid medium blue;
     border-radius: 10px;
 }

https://ithelp.ithome.com.tw/upload/images/20191005/20120959oS7JPay6K1.jpg


再來我們來學學如何分別設定邊框的上、下、左、右的樣式~

一個 border 可以分成四個邊:

  • 上邊框 - border-top-style
  • 下邊框 - border-bottom-style
  • 左邊框 - border-left-style
  • 右邊框 - border-right-style
p{
     border-top-style: solid;
     border-bottom-style: dashed;
     border-left-style: double;
     border-right-style: outset;
 }

https://ithelp.ithome.com.tw/upload/images/20191003/20120959YLpzlndXJz.jpg

也可以一次設定顏色+樣式

p{
     border-top: red dashed;
     border-bottom: blue dashed;
     border-left: green solid;
     border-right: purple solid;
 }

https://ithelp.ithome.com.tw/upload/images/20191003/20120959YN4D3gC194.jpg

Margin、Padding

Margin 和 Padding 只能設定距離,可以用長度、百分比、以及 'auto' 來設定,而
他們也可以分成四個邊來做設定。

p{
     background-color: pink;
     border: solid blue;
     margin: 10px;
     padding-top: 5%;
     padding-bottom: 5px;
     padding-left: 50%;
     padding-right: auto;
 }

https://ithelp.ithome.com.tw/upload/images/20191003/20120959eTLnTEf4Q5.jpg

參考資料:
https://www.wibibi.com/info.php?tid=89
https://www.1keydata.com/css-tutorial/tw/margin.php
https://www.1keydata.com/css-tutorial/tw/padding.php


上一篇
Day16-HTML(12) – CSS盒子模式(上)
下一篇
Day18-HTML(14) – 內嵌框架(iframe)
系列文
~網頁入門~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言