HTML 中的 box-border 盒子邊框詳解

order 盒子邊框

復(fù)合屬性。設(shè)置對象邊框的特性。
盒子邊框三要素：
① 邊框粗細(xì)
② 邊框樣式
③ 邊框顏色

語法：border: border-width | border-style | border-color ;

邊框四邊的粗細(xì)、樣式、顏色，以及上下左右每個位置的樣式屬性都是可以單獨調(diào)整的。

邊框的顏色不是必要的，如果不指定顏色，默認(rèn)顏色為黑色，但必須為盒子指定寬高。

初始 HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 500px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

邊框樣式

使用 border-style 可為盒子邊框設(shè)置樣式，以下示例為實線

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid; 
 }

效果：

可單獨針對某一方向設(shè)置邊框樣式

示例 CSS 代碼

上邊：border-top-style: double; （雙線）
右邊：border-right-style: solid; (實線)
下邊：border-bottom-style: dashed; (虛線)
左邊：border-left-style: dotted; (點線)

border-style 說明

如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-width等于0，本屬性將失去作用。

如果需要設(shè)置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說下面這段代碼，上下實線，左右虛線。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果：

border-style 樣式屬性值

屬性值解釋none無輪廓。 border-color將被忽略，border-width計算值為0，除非邊框輪廓為圖像，即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓

邊框粗細(xì)

使用 border-width 可為盒子邊框設(shè)置粗細(xì)，以下示例邊框為 5px 粗細(xì)

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width: 5px;
 }

效果

可單獨針對某一方向設(shè)置邊框粗細(xì)

示例 CSS 代碼

上邊：border-top-width: 10px; （雙線）
右邊：border-right-width: 10px; (實線)
下邊：border-bottom-width: 10px; (虛線)
左邊：border-left-width: 10px; (點線)

border-width 說明

如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-style設(shè)置為none或hidden，border-width的使用值將為0。

如果需要設(shè)置不同方向的邊框粗細(xì)，可以寫在一句 CSS 代碼里。

比如說下面這段代碼，上下2px，右2px，左5px。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
 }

效果：

邊框顏色

可直接輸入
顏色的英文名稱
rgb值
十六進制

使用 border-color 可為盒子邊框設(shè)置顏色，以下示例邊框顏色為紅色。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
     border-color: red;
 }

效果：

可單獨針對某一方向設(shè)置邊框顏色

示例 CSS 代碼

上邊：border-top-color: 10px;
右邊：border-right-color: 10px;
下邊：border-bottom-color: 10px;
左邊：border-left-color: 10px;

border-color 說明

如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-width等于0或border-style設(shè)置為none，本屬性將被忽略。

上面有兩個示例講述如何設(shè)置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。

border 是復(fù)合屬性

如果你需要同時設(shè)置盒子的粗細(xì)、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。

例如：

 /* CSS代碼 */
 div{
     border-top: 5px solid red;
 }

這段代碼指定了上邊框的三個屬性：粗細(xì)、樣式、顏色

border-top 包含了：

border-top-width: 5px;
border-top-style: solid;
border-top-color: red;

其他同理

教你用 CSS 畫個三角形

先來看一個示例

 /* CSS代碼 */
 div{
     width: 100px;
     height: 100px;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

細(xì)心的你，一定發(fā)現(xiàn)了 border 的邊框四條邊交接處是斜角。

此刻我們把盒子的寬高設(shè)置為 0

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

是不是完完全全像四個三角形一樣。

我們只需要把上邊和左右兩邊的三角形隱藏起來，它不就是一個三角形了。

為 border-color 指定 transparent 值，使盒子邊框顏色變透明

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
     border-left: 50px solid transparent;
 }

效果：

把另外三條邊透明之后，就只剩一個三角形了。

完

部分資料引用自：

http://caibaojian.com/css3/properties/border/index.htm

過本文章，可以掌握以下內(nèi)容：

pyside6 border樣式使用
pyside6 哪些控件支持border屬性
pyside6 border陰影效果

一、pyside6 border樣式使用

border可以為組件設(shè)置邊框?qū)挾龋螤睿伾蛨A角樣式，好的邊框樣式設(shè)計及統(tǒng)一，有助于界面統(tǒng)一風(fēng)格，是界面更加清晰有條理。下面是樣式的一些基本使用介紹

基本樣式

邊框?qū)挾葮邮?(border-width)：

設(shè)置邊框的寬度，可以使用像素(px)或其他CSS單位，等效于分別指定border-top-width、border-right-width、border-bottom-width和border-left-width屬性。未指定此屬性，則默認(rèn)為 none。

border-width: 2px;

邊框形狀樣式 (border-style)：

設(shè)置邊框的樣式，等效于分別指定border-top-style、border-right-style、border-bottom-style和border-left-style屬性。未指定此屬性，則默認(rèn)為 none。常見的邊框形狀樣式有

樣式值	說明
none	無邊框
solid	實線邊框
dashed	虛線邊框
dotted	點線邊框
double	雙線邊框
groove	凹槽邊框
ridge	脊邊框
inset	嵌入邊框
outset	突出處邊框

示例：

border-style: solid;

邊框顏色樣式 (border-color)：

設(shè)置邊框的顏色，可以使用顏色名稱、RGB值、HEX值等。等效于分別指定border-top-color、border-right-color、border-bottom-color和border-left-color屬性，如果未指定此屬性，則默認(rèn)為color（即小部件的前景色）

border-color: black;

簡寫樣式

可以使用簡寫屬性同時設(shè)置邊框的寬度、形狀和顏色。等效于分別指定border-color、border-style和/或border-width屬性。

border: 2px solid black;

邊框四邊寬度樣式

除了上面幾種方式，也可以分別為每個邊設(shè)置不同的寬度、形狀和顏色

四個邊的寬度

border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;

四個邊的形狀

border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;

四個邊的顏色

border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;

圖像邊框樣式（border-image）

允許使用圖像作為邊框，而不是純色或簡單的樣式，參見：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image語法

border-image: <'border-image-source'> <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? <'border-image-repeat'>;

子屬性說明

border-image-source

定義邊框圖像的源，可以是 URL 或其他圖像源。例子：url(border.png) 或 none。

border-image-slice

定義邊框圖像的切片位置，用于將圖像分成九個部分（四個角、四條邊和中間部分）。

可以使用一個、兩個、三個或四個值，分別表示上、右、下、左的切片位置。例子：30、30 30、30 30 30、30 30 30 30。

border-image-width

定義邊框圖像的寬度，可以是一個、兩個、三個或四個值，表示上、右、下、左的寬度。

它是一個可選值，位于 border-image-slice 之后，用 / 分隔。例子：30、30 30、30 30 30、30 30 30 30。

border-image-outset

定義邊框圖像超出邊框盒的距離，可以是一個、兩個、三個或四個值，表示上、右、下、左的外延。它是一個可選值，位于 border-image-width 之后，用 / 分隔。例子：10、10 10、10 10 10、10 10 10 10。

border-image-repeat

定義邊框圖像的重復(fù)方式，有四個可能的值：stretch（拉伸）、repeat（重復(fù)）、round（圓整）、space（空間）。可以使用一個值或兩個值，表示水平和垂直方向的重復(fù)方式。例子：stretch、repeat、round、space。

示例：

這個是81*81像素的圖片，垂直方向和水平方向上各排列著三個菱形，每個菱形的寬和高皆為 81 ÷ 3 = 27像素

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
if __name__ == '__main__':
    app = QApplication([])
    # 創(chuàng)建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Image Example')
    # 創(chuàng)建按鈕
    button = QPushButton('圖片按鈕')
    button.setStyleSheet("""
        QPushButton {
            width: 200px;
            background-color: #ffa;
            border: 36px solid orange;
            margin: 30px;
            padding: 10px;
            border-image: url(../icons/border.png) 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
        }
    """)
    # 布局管理
    layout = QVBoxLayout()
    layout.addWidget(button)
    window.setLayout(layout)
    window.show()
    app.exec()

圓角邊框樣式 (border-radius)

設(shè)置圓角邊框，不能直接設(shè)置為百分比單位，只有固定的像素（px）和其他絕對CSS單位。

border-radius: 10px;

分別設(shè)置每個角的圓角

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

以下是一個完整的示例，展示如何為一個QPushButton組件定義各種邊框?qū)傩裕?/p>

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
if __name__ == '__main__':
    app = QApplication([])
    # 創(chuàng)建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Example')
    # 創(chuàng)建按鈕
    button = QPushButton('Button with complex border')
    button.setStyleSheet("""
        border: 2px solid black;
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: yellow;
        border-top-width: 5px;
        border-right-width: 3px;
        border-bottom-width: 1px;
        border-left-width: 4px;
        border-radius: 15px;
        padding: 10px;
        margin: 20px;
    """)
    # 布局管理
    layout = QVBoxLayout()
    layout.addWidget(button)
    window.setLayout(layout)
    window.show()
    app.exec()

效果圖：

二、控件支持border樣式說明

border的樣式在pyside里面，不是所有控件都支持，是有限制條件的。各控件樣式支持說明

控件	基本樣式	顏色樣式	圖片樣式	圓角樣式	形狀樣式	寬度樣式
QAbstractItemView 子類	√	√	√	√	√	√
QAbstractSpinBox 子類	√	√	√	√	√	√
QCheckBox	√	√	√	√	√	√
QComboBox	√	√	√	√	√	√
QFrame	√	√	√	√	√	√
QGroupBox	√	√	√	√	√	√
QLabel	√	√	√	√	√	√
QLineEdit	√	√	√	√	√	√
QMenu	√	√	√	√	√	√
QMenuBar	√	√	√	√	√	√
QPushButton	√	√	√	√	√	√
QRadioButton	√	√	√	√	√	√
QSplitter	√	√	√	√	√	√
QTextEdit	√	√	√	√	√	√
QToolTip	√	√	√	√	√	√
直接繼承QWidget控件	√	√	×	×	×	×

三、Pyside6 border陰影效果

在PySide6中，邊框投影（shadow）可以通過設(shè)置樣式表來實現(xiàn)。雖然樣式表不直接支持CSS中的box-shadow屬性，但可以通過QGraphicsDropShadowEffect類來為組件添加陰影效果。示例：

信我或關(guān)注微信號：獅范兒，回復(fù)：學(xué)習(xí)，獲取免費學(xué)習(xí)資源包。

在我們平時網(wǎng)頁中，想必大家一定用過border，可以根據(jù)border給我們提供的各種屬性實現(xiàn)盒子的邊框效果，那么今天就給大家分享一下邊框的應(yīng)用。

常規(guī)姿勢

在CSS1中就定義了邊框樣式屬性：border設(shè)置全部或指定具體邊框樣式。具體包括指定樣式：寬度：width、樣式：style（none、solid、dotted、dashed等）、顏色：color。可以通過border統(tǒng)一設(shè)置邊框樣式，也可以通過border-left:width style color獨立設(shè)置邊框樣式。這部分相對比較簡單，下面我們來使用div示例及樣式展示一下基本設(shè)置方法：

特殊姿勢

我們都知道，標(biāo)準(zhǔn)盒子模型的大小會受content（width,height）、padding、border的影響，所以，即使一個盒子未設(shè)置內(nèi)容大小，只要有邊框或內(nèi)邊距，盒子也是會有大小的。我們就從這里出發(fā)，假若盒子未設(shè)置寬度和高度，我們給盒子增加了邊框大小為10px,給每邊邊框設(shè)置不同的顏色來看一下：

假使只有上邊框有顏色，其他邊框的顏色均為透明：

此時我們就會得到一個三角小圖標(biāo)，是不是感覺很神奇。

再比如，我們給盒子設(shè)置width，再來觀察下，你就會發(fā)現(xiàn)你得到了一個梯形。

借助其他樣式合并輸出姿勢

border邊框還能與border-radius一起來做出我們希望效果。例如：

再做一個月亮給你呀：

再送你一朵小花花：

最后做一個火熱的愛心送給你呀~~

私信我或關(guān)注微信號：獅范兒，回復(fù)：學(xué)習(xí)，獲取免費學(xué)習(xí)資源包。

在線咨詢

上一篇：HTML字間距如何設(shè)置？#html
下一篇：html禁止瀏覽器文本框填充，煩人的記錄都走開

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML 中的 box-border 盒子邊框詳解

初始 HTML

邊框樣式

可單獨針對某一方向設(shè)置邊框樣式

border-style 說明

border-style 樣式屬性值

邊框粗細(xì)

可單獨針對某一方向設(shè)置邊框粗細(xì)

border-width 說明

邊框顏色

可單獨針對某一方向設(shè)置邊框顏色

border-color 說明

border 是復(fù)合屬性

教你用 CSS 畫個三角形

基本樣式

簡寫樣式

邊框四邊寬度樣式

圖像邊框樣式（border-image）

圓角邊框樣式 (border-radius)

您的項目需求