當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端----HTML/CSS 单边框

發布時間：2023/12/14 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了前端----HTML/CSS 单边框小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

先說下邊框怎么用:

border-bottom:2px solid red;

3個參數意思分別是邊框寬度為2px(2像素),邊框類型為實線,邊框顏色為紅色

<!DOCTYPE html> <html> <head> <style>p{border-bottom:2px solid red;} </style> </head><body><p>測試。</p> </body></html>

效果圖:

再介紹border的具體用法:

由上例我們能看出來參數一共有三個:

首先指定邊框,要設置四面的邊框直接用 border:

左邊框就是border-left:

下邊框border-bottom:

右和上是right和top

制定完邊框就要設置參數了,三個參數用空格隔開

為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick 、medium（默認值）和 thin。

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

指定要顯示什么樣的邊界。常用的就是solid表示實線.

border-color屬性用于設置邊框的顏色。可以設置的顏色：

您還可以設置邊框的顏色為"transparent"(透明)。

注意：?border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。

這里的設置語句是簡寫模式,直接設置三個參數,空格隔開,

當然也可以單獨設置某個屬性值,

如下邊框樣式為實線:? border-bottom-style: solid;

border是很簡單基礎同時很常用的屬性,今天就多次用到下邊框,效果很好,乍一看還以為是<hr>的橫線,

感覺下邊框的位置更方便控制,更喜歡用下邊框.

文章有對菜鳥教程的引用,貼網址:

http://www.runoob.com/css/css-border.html

以上是生活随笔為你收集整理的前端----HTML/CSS 单边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。