close

 

如何更換外框以及背景顏色？

◾ 更換背景顏色》前往色碼表網站，複製色碼（例如： #0080FF），貼到CSS程式碼中的background-color後面。
◾ 範例：background-color:#0080FF

◾ 更換外框顏色》前往色碼表網站，複製色碼（例如： #0080FF），貼到CSS程式碼中的border-color後面。
◾ 範例：border-color:#0080FF
 

如何外框線條樣式？

◾ 依照下面的邊框造型對應的名稱，貼到CSS程式碼中的border-style後面。

◾ 範例：border-style:solid

【邊框造型】
solid；實線
dashed；虛線
double；雙線
dotted；點線
groove；凹線
ridge；凸線
inset；嵌入線
outset；浮出線

▼示意圖▼

Screen Shot 2021-09-30 at 1.00.38 AM.png

 

邊框樣式範例

 

▼範例1▼

邊框樣式-1

▼CSS語法複製▼

<div style="border-width:1px;border-style:solid;border-color:#D0D0D0;background-color:#FCFCFC;padding:20px 30px;">邊框樣式-1</div>

▼說明▼

◾ 邊框線條寬度：border-width:1px
◾ 邊框線條樣式：border-style:solid
◾ 邊框線條顏色：border-color:#D0D0D0
◾ 背景底色：background-color:#FCFCFC
◾ 邊框內距（上下距離20px 左右距離30px）：padding:20px 30px
◾ 內文：邊框樣式-1

 

 

▼範例2▼

邊框樣式-2

▼CSS語法複製▼

<div style="box-sizing: border-box; font-family: Arial, &quot;Microsoft JhengHei&quot;, sans-serif; padding: 10px; border-left: 5px solid rgb(240, 173, 78); font-size: 16px; background-color: #F0F0F0;">
<p>邊框樣式-2</p>
</div>

▼說明▼

◾ 邊框內距（上下左右距離 20px）：padding: 10px
◾ 左邊線條寬度：border-left: 5px
◾ 背景底色：background-color: #F0F0F0
◾ 內文：邊框樣式-2

 

 

▼範例3▼

邊框樣式-3

▼CSS語法複製▼

<div style="border-width:2px;border-style:dashed ;border-color: #A87E48 ;background-color:#F7F2E8 ;padding:20px 30px;">邊框樣式-3</div>

▼說明▼

◾ 邊框線條寬度：border-width:2px
◾ 邊框線條樣式：border-style:dashed
◾ 邊框線條顏色：border-color:#A87E48
◾ 背景底色：background-color:#F7F2E8
◾ 邊框內距（上下距離20px 左右距離30px）：padding:20px 30px
◾ 內文：邊框樣式-3

 

 

▼範例4▼

邊框樣式-4

▼CSS語法複製▼

<div style="box-sizing: border-box; background-color:transparent; margin: 0px 0px 25px; line-height: 1; padding: 0px; border-width: 0px 0px 2px; border-bottom-style: solid; border-bottom-color: #EEB558; vertical-align: baseline;"><span style="font-size:20px"><span style="background-color:r#EEB558 ; border:0px; box-sizing:border-box; color:rgb(255, 255, 255); display:inline-block; margin:0px; padding:8px 12px 5px; vertical-align:baseline">邊框樣式-4</span></span></div>

▼說明▼

◾ 方塊底色：background-color:r#EEB558
◾ 底線顏色：border-bottom-color: #EEB558
◾ 內文：邊框樣式-4

 

 

▼範例5▼（置中邊框，可以依照輸入的字數，來調整width寬度）

邊框樣式-5

▼CSS語法複製▼

<div style="margin:0px auto; width:100px; background-color: rgb(225, 119, 4); padding: 5px 10px; text-align: center;"><strong><font color="#ffffff"><span style="font-size:16px">邊框樣式-5</span></font></strong></div>

▼說明▼

◾ 方塊底色：background-color: rgb(225, 119, 4)
◾ 邊框寬度：width:100px （字數較多時，可以把邊框加長）
◾ 內文：邊框樣式-5

arrow
arrow
    文章標籤
    文字樣式框
    全站熱搜

    Christine 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄