亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS 盒子模型邊框

學習過HTML 的同學都知道,在HTML 中,我們常使用表格來創(chuàng)建周圍的邊框,但是通過使用CSS 邊框?qū)傩?我們可以創(chuàng)建出效果出色的邊框,並且可以應用於任何元素.

每個border 屬性我們可以設定寬度,樣式,以及顏色.下面我們就看看如何透過border 屬性來設定邊框?qū)挾?以及顏色:

CSS 沒有定義3 個關鍵字的具體寬度,所以一個用戶代理可能把thin 、medium 和thick 分別設定為等於5px、3px 和2px,而另一個用戶代理則分別設定為3px、2px 和1px。

可以透過如下的內(nèi)容

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;

下面是效果截圖:

QQ截圖20161011155442.png


#說完寬度,我們再來看看顏色,設定邊框顏色非常簡單。 CSS 使用一個簡單的 border-color 屬性,它一次可以接受最多 4 個顏色值,分別是邊框的四邊(具體順序自己可以試試)??梢允褂萌魏晤愋偷念伾?,例如可以是命名顏色,也可以是十六進位和RGB 值:

#在CSS 文件中加入以下內(nèi)容:

  border-color: blue rgb(25%,35%,45%) #909090 red;

下面就是效果截圖:

QQ截圖20161011155448.png


同樣可以使用屬性控制各個邊框的顏色,以達到相同的效果: border-top-color border-right- color border-bottom-color border-left-color

?


#
繼續(xù)學習
||
<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>