CSS 盒子模型邊框
學習過HTML 的同學都知道,在HTML 中,我們常使用表格來創建周圍的邊框,但是通過使用CSS 邊框屬性,我們可以創建出效果出色的邊框,並且可以應用於任何元素.
每個border 屬性我們可以設定寬度,樣式,以及顏色.下面我們就看看如何透過border 屬性來設定邊框寬度,以及顏色:
CSS 沒有定義3 個關鍵字的具體寬度，所以一個用戶代理可能把thin 、medium 和thick 分別設定為等於5px、3px 和2px，而另一個用戶代理則分別設定為3px、2px 和1px。
可以透過如下的內容
td {border-style: solid; border-width: 15px 5px 15px 5px;}同樣,這裡我們也可以設定單邊邊框的寬度,
border-top-width border-right-width border-bottom-width border-left-width
下面我們在CSS 檔案中加入
border-style: dashed; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px;
下面是效果截圖:
#說完寬度,我們再來看看顏色,設定邊框顏色非常簡單。 CSS 使用一個簡單的 border-color 屬性，它一次可以接受最多 4 個顏色值,分別是邊框的四邊(具體順序自己可以試試)。可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進位和RGB 值：
#在CSS 文件中加入以下內容:
border-color: blue rgb(25%,35%,45%) #909090 red;
下面就是效果截圖:
同樣可以使用屬性控制各個邊框的顏色,以達到相同的效果: border-top-color border-right- color border-bottom-color border-left-color
新建檔案
<html>
<head>
<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 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>注释：</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 