回覆列表
  • 1 # 使用者7116633103828

    就是 離邊框=1象素 border就是畫邊框的意思

    如果還不夠詳細

    它是CSS的一個屬性,用它可以給能確定範圍的HTML標記(如TD、DIV等等)畫邊框,它可以定義邊框線的型別、寬度和顏色,利用這個特性,可以製作一些特殊效果。下面將透過實 例來說明其應用技巧。

    1、給文字加邊框

    上面的示例中,給一段文字加了不同的邊框,只是為了說明邊框線的顏色、粗細是可變的。第一個邊框的CSS程式碼是:style= "border:thin solid red";“border”後面的三個引數的含義是:邊框線的寬度是:thin(細線);邊框線的型別: solid(實線);邊框線的顏色:red(紅色)。我們定義邊框,實際上就是設定這三個引數值。

    邊框線的寬度有三個標準值:thin(細線)、medium(中粗線)和thick(粗線),此外,也可以自定義寬度,如:1pt、5px、2cm等。

    邊框線的型別有九個確定值:none(無邊框線)、 dotted(由點組成的虛線)、 dashed(由短線組成的虛線)、 solid (實線)、 double(雙線,雙線寬度加上它們之間的空白部分的寬度就等於border-width定義的寬度)、 groove(3D溝槽狀的邊 框)、 ridge(3D脊狀的邊框)、 inset(3D內嵌邊框,顏色較深)、 outset(3D外嵌邊框,顏色較淺),注意:如果系統不支援這些 邊框的屬性值,那麼“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都會被 “solid”代替。

    邊框線的顏色:可以用十六進位制的顏色程式碼,如#00ffcc。

    從上面可以看出,給文字加邊框確實很簡單,上例中後面那幾個邊框的設定,我不講你也明白了吧!在這裡告訴你一點小技巧,給一段文字加邊框,可 把CSS加在〈P〉標記裡;給幾段文字加邊框,先把那幾段文字用DIV標記括起來,再把CSS加在〈DIV〉標記裡;若是要給一行文字加幾個不同的邊框, 則需要把文字放在表格裡,再把CSS分別加到〈TD〉標記裡。

    2、給導航選單加分隔線

    上面這個例子中的小白線,當然可以用圖象來做,但我在這裡是用CSS的“border”的擴充套件屬性畫了邊框的一條邊,這樣程式碼要少的多。畫邊框的單邊與上例的邊框的四條邊類似,一個邊框的四條邊的屬性如下:

    邊框線名稱:border-top(上邊框線)、border-right(右邊框線)、border-bottom(下邊框線)和 boder-left(左邊框線);每條邊框線的型別、寬度和顏色的取值與“boder”屬性相同。如本例中要定義每個單元格的左邊框線為白色線,線的寬 度為“1px”的實線,則CSS程式碼是這樣的:style="border-left: 1px solid #ffffff"。在單獨定義邊框線時,若 不給出某個值,那麼就取其預設的初始值。在dreamweaver中定義CSS非常方便,不用編寫程式碼;把常用的邊框線一次定義好,放在外連式CSS檔案 中,要用時呼叫一下就行了,非常方便。

    3、在一個邊框中採用不同寬度和顏色的邊框線

    在本例中的效果,當然可以用上例中的方法來實現,但那樣程式碼過多,可採用另一種合併的方法,把四條邊的屬性值分類放在一起,如本例的程式碼是這樣的:

    style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。

    從上面可以看出,我把邊框線的型別、寬度和顏色歸類在一起定義了,這裡請注意幾點:

    一、四條邊框線的位置順序是:上邊框線、右邊框線、下邊框線、左邊框線;

    二、我在本例中邊框線的型別只取了一種實線型別,實際上四條邊也可以分別定義不同的型別;

    三、屬性值可以定義一個、兩個、三個或者四個。如果僅定義一個屬性值,則其餘三個自動取相同值,如:border-style:solid與 border-style:solid solid solid solid的效果完全一樣;如果僅給出兩個或三個值,那麼缺失邊的屬性值將取與對邊相同 的值。如:boder-width:thin thick與border-width:thin thick thin thick效果相同, border-width:1px 2px 3px與border-width:1px 2px 3px 2px的效果相同。

    Border屬性的靈活應用,可以產生許多特殊效果,方法與上面介紹的相同

  • 中秋節和大豐收的關聯?
  • thinkpad和神舟筆記本怎麼選?