HTML之CSS (Border)邊框<三>(邊框-單獨設置各邊和邊框屬性)

邊框-單獨設置各邊

在CSS中,可以指定不同的側面不同的邊框:

打開記事本,編寫以下代碼,並保存為HTML格式文件,代碼如下。


HTML之CSS (Border)邊框<三>(邊框-單獨設置各邊和邊框屬性)


(2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。


HTML之CSS (Border)邊框<三>(邊框-單獨設置各邊和邊框屬性)

上面的例子也可以設置一個單一屬性:


打開記事本,編寫以下代碼,並保存為HTML格式文件,代碼如下。


HTML之CSS (Border)邊框<三>(邊框-單獨設置各邊和邊框屬性)


(2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。


HTML之CSS (Border)邊框<三>(邊框-單獨設置各邊和邊框屬性)

邊框屬性


CSS 邊框屬性


HTML之CSS (Border)邊框<三>(邊框-單獨設置各邊和邊框屬性)

邊框-簡寫屬性

上面的例子用了很多屬性來設置邊框。

你也可以在一個屬性中設置邊框。

你可以在"border"屬性中設置:

border-width

border-style (required)

border-color

打開記事本,編寫以下代碼,並保存為HTML格式文件,代碼如下。


HTML之CSS (Border)邊框<三>(邊框-單獨設置各邊和邊框屬性)

(2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

HTML之CSS (Border)邊框<三>(邊框-單獨設置各邊和邊框屬性)


分享到:


相關文章: