CSS 邊框(border)例項
阿新 • • 發佈：2018-11-16
CSS 邊框(border)例項：
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
CSS 邊框屬性
屬性 描述
border 簡寫屬性，用於把針對四個邊的屬性設定在一個宣告。
border-style 用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。
border-width 簡寫屬性，用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。
border-color 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。
border-bottom 簡寫屬性，用於把下邊框的所有屬性設定到一個宣告中。
border-bottom-color 設定元素的下邊框的顏色。
border-bottom-style 設定元素的下邊框的樣式。
border-bottom-width 設定元素的下邊框的寬度。
border-left 簡寫屬性，用於把左邊框的所有屬性設定到一個宣告中。
border-left-color 設定元素的左邊框的顏色。
border-left-style 設定元素的左邊框的樣式。
border-left-width 設定元素的左邊框的寬度。
border-right 簡寫屬性，用於把右邊框的所有屬性設定到一個宣告中。
border-right-color 設定元素的右邊框的顏色。
border-right-style 設定元素的右邊框的樣式。
border-right-width 設定元素的右邊框的寬度。
border-top 簡寫屬性，用於把上邊框的所有屬性設定到一個宣告中。
border-top-color 設定元素的上邊框的顏色。
border-top-style 設定元素的上邊框的樣式。
border-top-width 設定元素的上邊框的寬度。
##################
定義和用法
border-style 屬性用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。
只有當這個值不是 none 時邊框才可能出現。
例子 1
border-style:dotted solid double dashed;
上邊框是點狀
右邊框是實線
下邊框是雙線
左邊框是虛線
####################
可能的值
值 描述
none 定義無邊框。
hidden 與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed 定義虛線。在大多數瀏覽器中呈現為實線。
solid 定義實線。
double 定義雙線。雙線的寬度等於 border-width 的值。
groove 定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge 定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset 定義 3D inset 邊框。其效果取決於 border-color 的值。
outset 定義 3D outset 邊框。其效果取決於 border-color 的值。
inherit 規定應該從父元素繼承邊框樣式。
##########################
1.所有邊框屬性在一個宣告之中
本例演示用簡寫屬性來將所有四個邊框屬性設置於同一宣告中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{border:medium double rgb(250,0,255)}
</style>
</head>
<body>
<p>Some text</p>
</body>
2.設定四邊框樣式
本例演示如何設定四邊框樣式。
<style type="text/css">
p.dotted {border-style:dotted}
p.dashed {border-style:dashed}
p.solid {border-style:solid}
p.double {border-style:double}
p.groove {border-style: groove}
p.ridge {
border-style: ridge;}
p.inset {border-style: outset}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">An inset border</p>
<p class="outset">An outset border</p>
</body>
3.設定每一邊的不同邊框
本例演示如何在元素的各邊設定不同的邊框。
<style class="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style:groove double}
p.three {vorder-style:solid double groove}
</style>
</head>
<body>
<p class="soliddouble">Some text</p>
<P class="doublesolid">Some text</P>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>
4.所有邊框寬度屬性在一個宣告之中
本例演示用簡寫屬性來將所有邊框寬度屬性設置於同一宣告中。
<style type="text/css">
p.one{border-style: solid;border-width: 5px;}
p.two{border-style:solid;border-width:thick}
p.three{border-style:solid;border-width:5px 10px}
p.four{border-style:solid;border-width:5px 10px 1px}
p.five{border-style: solid;border-width:5px 10px 1px medium}
</style>
</head>
<body>
<p class="one"> Some text</p>
<p class="two"> Some text</p>
<p class="three"> Some text</p>
<p class="four">Some text</p>
<p class="five">Some text</p>
</body>
5.設定四個邊框的顏色
本例演示如何設定四個邊框的顏色。可以設定一到四個顏色。
<style type="text/css">
p.one {border-style:solid;
border-color: #0000ff;}
p.two{border-style:solid;border-color: #ff0000 #0000ff}
p.three{border-style:solid;border-color:#ff0000 #0000ff #00ff00}
p.four{border-style:solid;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255)}
</style>
</head>
<body>
<p class="one">Some text</p>
<p class="two"> Some text</p>
<p class="three"> Some text</p>
<p class="four">Some text</p>
</body>
6.所有下邊框屬性在一個宣告中
本例演示用簡寫屬性來將所有下邊框屬性設定在同一宣告中。
<style type="text/css">
p{border-style:solid;border-bottom:thick dotted #ff0000}
</style>
</head>
<body>
<p>This is some test</p>
</body>
7.設定下邊框的顏色
本例演示如何設定下邊框的顏色。
<style type="text/css">
p{border-style:solid;border-bottom-color:#ff0000}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
8.設定下邊框的樣式
本例演示如何設定下邊框的樣式。
<title>Title</title>
<style type="text/css">
p {border-style:solid}
p.none {border-bottom-style:none}
p.dotted {border-bottom-style:dotted}
p.dashed {border-bottom-style:dashed}
p.solid {border-bottom-style:solid}
p.double {border-bottom-style:double}
p.groove {border-bottom-style:groove}
p.ridge {border-bottom-style:ridge}
p.inset {border-bottom-style:inset}
p.outset {border-bottom-style:outset}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
9.設定下邊框的寬度
本例演示如何設定下邊框的寬度。
<style type="text/css">
p.one{border-style: solid;border-bottom-width:15px}
p.two{border-style:solid;border-bottom-width:thin}
</style>
</head>
<body>
<p class="one"><b>註釋</b>“border-nottom-widt” 屬性如果單獨使用得話是不會起作用的。請首先使用"border-style" 屬性來設定邊框</p>
<p class="two">Some text.</p>
</body>
10.所有左邊框屬性在一個宣告之中
所有左邊框屬性在一個宣告之中
<style type="text/css">
p{border-style:solid;border-left:thick double #ff0000;}
</style>
</head>
<body>
<P>This is some text</P>
</body>
11.設定左邊框的顏色
本例演示如何設定左邊框的顏色。
<style type="text/css">
p{border-style:solid;border-left-color: #ff0000}
</style>
</head>
<body>
<p>some text.</p>
</body>
12.設定左邊框的樣式
本例演示如何設定左邊框的樣式。
<style type="text/css">
p
{
border-style:solid;
}
p.none {border-left-style:none}
p.dotted {border-left-style:dotted}
p.dashed {border-left-style:dashed}
p.solid {border-left-style:solid}
p.double {border-left-style:double}
p.groove {border-left-style:groove}
p.ridge {border-left-style:ridge}
p.inset {border-left-style:inset}
p.outset {border-left-style:outset}
</style>
</head>
<body>
<p class="none">No left border.</p>
<p class="dotted">A dotted left border.</p>
<p class="dashed">A dashed left border.</p>
<p class="solid">A solid left border.</p>
<p class="double">A double left border.</p>
<p class="groove">A groove left border.</p>
<p class="ridge">A ridge left border.</p>
<p class="inset">An inset left border.</p>
<p class="outset">An outset left border.</p>
</body>
13.設定左邊框的寬度
本例演示如何設定左邊框的寬度。
<style type="text/css">
p.one{border-style:solid;border-left-width:15px}
p.two{border-style:solid;border-left-width:thin}
</style>
</head>
<body>
<p class="one"><b>註釋：</b>"border-left-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設定邊框。</p>
<p class="two">Some text. Some more text.</p>
14.所有右邊框屬性在一個宣告之中
本例演示一個簡寫屬性，用於把所有右邊框屬性設定在一條宣告中。
<style type="text/css">
p {border-style:solid;border-right:thick double #ff0000;}
</style>
</head>
<body>
<p>This is some text </p>
</body>
15.設定右邊框的顏色
本例演示如何設定右邊框的顏色。
<style type="text/css">
p{border-style:solid;border-right-color:#ff0000}
</style>
</head>
<body>
<p>Some text.</p>
</body>
16.設定右邊框的樣式
本例演示如何設定右邊框的樣式。
<style type="text/css">
p.dotted {border-right-style: dotted}
p.dashed {border-right-style: dashed}
p.solid {border-right-style: solid}
p.double {border-right-style: double}
p.groove {border-right-style: groove}
p.ridge {border-right-style: ridge}
p.inset {border-right-style: inset}
p.outset {border-right-style: outset}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">An inset border</p>
<p class="outset">An outset border</p>
17.設定右邊框的寬度
本例演示如何設定右邊框的寬度。
<title>Title</title>
<style type="text/css">
p.one {border-style:solid;border-right-width:15px}
p.two{border-style:solid;border-right-width:thin}
</style>
</head>
<body>
<p class="one"><b>註釋：</b>"border-right-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設定邊框。</p>
<p class="two">Some text. Some more text.</p>
18.所有上邊框屬性在一個宣告之中
本例演示用簡寫屬性來將所有上邊框屬性設置於同一宣告之中。
p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
19.設定上邊框的顏色
本例演示如何設定上邊框的顏色。
<style type="text/css">
p.one {border-style:solid;border-right-width:15px}
p.two{border-style:solid;border-right-width:thin}
</style>
</head>
<body>
<p class="one"><b>註釋：</b>"border-right-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設定邊框。</p>
<p class="two">Some text. Some more text.</p>
20.設定上邊框的樣式
本例演示如何設定上邊框的樣式。
<style type="text/css">
p
{
border-style:solid;
}
p.none {border-top-style:none}
p.dotted {border-top-style:dotted}
p.dashed {border-top-style:dashed}
p.solid {border-top-style:solid}
p.double {border-top-style:double}
p.groove {border-top-style:groove}
p.ridge {border-top-style:ridge}
p.inset {border-top-style:inset}
p.outset {border-top-style:outset}
</style>
</head>
<body>
<p class="none">No top border.</p>
<p class="dotted">A dotted top border.</p>
<p class="dashed">A dashed top border.</p>
<p class="solid">A solid top border.</p>
<p class="double">A double top border.</p>
<p class="groove">A groove top border.</p>
<p class="ridge">A ridge top border.</p>
<p class="inset">An inset top border.</p>
<p class="outset">An outset top border.</p>
</body>
21.設定上邊框的寬度
本例演示如何設定上邊框的寬度。
<style type="text/css">
p.one
{
border-style: solid;
border-top-width: 15px
}
p.two
{
border-style: solid;
border-top-width: thin
}
</style>
</head>
<body>
<p class="one"><b>註釋：</b>"border-top-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設定邊框。</p>
<p class="two">Some text. Some more text.</p>
</body>