CSS 邊框 (Border)

CSS 邊框 (Border)

p {border-style:solid;}

實線

p {border-style:dashed;}

虛線

p {border-style:double;}

雙線

p {border-style:dotted;}

點線

p {border-style:groove;}

凹線

p {border-style:ridge;}

凸線

p {border-style:inset;}

嵌入線

p {border-style:outset;}

浮出線

p {border-width:9px; border-style:solid;}

邊框寬度為 9px

p {border-width:medium; border-style:dashed;}

邊框寬度為中等

p {border-color:#0000FF; border-style:solid;}

藍色邊框

p {border-color:red; border-style:dotted;}

紅色邊框

p {border-top-style:solid; border-bottom-style:dotted;}

例1:上邊框為實線,下邊框為點線

p {border-top-style:solid; border-top-width:medium;}

例 2:上邊框為實線,且寬度中等

p {border-left-style:solid; border-bottom-style:dashed;
border-bottom-color:#00FF00;}

例3:左邊框為實線,下邊框為虛線,且顏色為綠色

p {
border:#0000FF 5px solid;
}

p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}

p {
border-style: none;
border-width: 50px;
}

p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}

上下藍色/左右紅色
p { border-style: solid;
border-color: blue red;
}

實線黑色邊框,右邊為紅色
h1 {
border-style: solid;
border-color: black;
border-right-color: red;
}


滑鼠移到連結物件, 就會出現 5px 的灰色實線邊框
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;}
a:hover {
border-color: gray;
}

示範案例: 愛凸悅斯 i2yes com