亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

      考試首頁 | 考試用書 | 培訓(xùn)課程 | 模擬考場 | 考試論壇  
        當前位置:設(shè)計制作 > CSS/HTML > 文章內(nèi)容
        

      CSS基礎(chǔ)教程:邊框的寬度

       [ 2016年5月4日 ] 【

      您可以通過 border-width 屬性為邊框指定寬度。

      為邊框指定寬度有兩種方法:可以指定長度值,比如 2px 或 0.1em;或者使用 3 個關(guān)鍵字之一,它們分別是 thin 、medium(默認值) 和 thick。

      注釋:CSS 沒有定義 3 個關(guān)鍵字的具體寬度,所以一個用戶代理可能把 thin 、medium 和 thick 分別設(shè)置為等于 5px、3px 和 2px,而另一個用戶代理則分別設(shè)置為 3px、2px 和 1px。

      所以,我們可以這樣設(shè)置邊框的寬度:

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

      或者:

      p {border-style: solid; border-width: thick;}

      定義單邊寬度

      您可以按照 top-right-bottom-left 的順序設(shè)置元素的各邊邊框:

      p {border-style: solid; border-width: 15px 5px 15px 5px;}

      上面的例子也可以簡寫為(這樣寫法稱為值復(fù)制):

      p {border-style: solid; border-width: 15px 5px;}

      您也可以通過下列屬性分別設(shè)置邊框各邊的寬度:

      • border-top-width
      • border-right-width
      • border-bottom-width
      • border-left-width

      因此,下面的規(guī)則與上面的例子是等價的:

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

      沒有邊框

      在前面的例子中,您已經(jīng)看到,如果希望顯示某種邊框,就必須設(shè)置邊框樣式,比如 solid 或 outset。

      那么如果把 border-style 設(shè)置為 none 會出現(xiàn)什么情況:

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

      盡管邊框的寬度是 50px,但是邊框樣式設(shè)置為 none。在這種情況下,不僅邊框的樣式?jīng)]有了,其寬度也會變成 0。邊框消失了,為什么呢?

      這是因為如果邊框樣式為 none,即邊框根本不存在,那么邊框就不可能有寬度,因此邊框?qū)挾茸詣釉O(shè)置為 0,而不論您原先定義的是什么。

      記住這一點非常重要。事實上,忘記聲明邊框樣式是一個常犯的錯誤。根據(jù)以下規(guī)則,所有 h1 元素都不會有任何邊框,更不用說 20 像素寬了:

      h1 {border-width: 20px;}

      由于 border-style 的默認值是 none,如果沒有聲明樣式,就相當于 border-style: none。因此,如果您希望邊框出現(xiàn),就必須聲明一個邊框樣式。

      將考試網(wǎng)添加到收藏夾 | 每次上網(wǎng)自動訪問考試網(wǎng) | 復(fù)制本頁地址,傳給QQ/MSN上的好友 | 申請鏈接 | 意見留言 TOP
      關(guān)于本站  網(wǎng)站聲明  廣告服務(wù)  聯(lián)系方式  站內(nèi)導(dǎo)航  考試論壇
      Copyright © 2007-2013 中華考試網(wǎng)(Examw.com) All Rights Reserved