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

order 盒子邊框

復合屬性。設置對象邊框的特性。
盒子邊框三要素：
① 邊框粗細
② 邊框樣式
③ 邊框顏色

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

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

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

初始 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 可為盒子邊框設置樣式，以下示例為實線

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

效果：

可單獨針對某一方向設置邊框樣式

示例 CSS 代碼

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

border-style 說明

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

如果需要設置不同方向的樣式屬性，可以寫在一句 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凸邊輪廓

邊框粗細

使用 border-width 可為盒子邊框設置粗細，以下示例邊框為 5px 粗細

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

效果

可單獨針對某一方向設置邊框粗細

示例 CSS 代碼

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

border-width 說明

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

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

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

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

效果：

邊框顏色

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

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

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

效果：

可單獨針對某一方向設置邊框顏色

示例 CSS 代碼

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

border-color 說明

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

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

border 是復合屬性

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

例如：

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

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

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;
 }

效果：

細心的你，一定發現了 border 的邊框四條邊交接處是斜角。

此刻我們把盒子的寬高設置為 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

素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。

CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。

邊框樣式

border-style屬性用來定義邊框的樣式。

border-style的值：

（1）編輯代碼

打開記事本，編寫其代碼，并保存為HTML格式文件。代碼如下。

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

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

過本文章，可以掌握以下內容：

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

一、pyside6 border樣式使用

border可以為組件設置邊框寬度，形狀，顏色和圓角樣式，好的邊框樣式設計及統一，有助于界面統一風格，是界面更加清晰有條理。下面是樣式的一些基本使用介紹

基本樣式

邊框寬度樣式 (border-width)：

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

border-width: 2px;

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

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

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

示例：

border-style: solid;

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

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

border-color: black;

簡寫樣式

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

border: 2px solid black;

邊框四邊寬度樣式

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

四個邊的寬度

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

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

示例：

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

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
if __name__ == '__main__':
    app = QApplication([])
    # 創建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Image Example')
    # 創建按鈕
    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)

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

border-radius: 10px;

分別設置每個角的圓角

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

以下是一個完整的示例，展示如何為一個QPushButton組件定義各種邊框屬性：

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
if __name__ == '__main__':
    app = QApplication([])
    # 創建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Example')
    # 創建按鈕
    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）可以通過設置樣式表來實現。雖然樣式表不直接支持CSS中的box-shadow屬性，但可以通過QGraphicsDropShadowEffect類來為組件添加陰影效果。示例：

在線咨詢

上一篇：從HTML源代碼中檢測并輸出暗鏈接
下一篇：PSD轉HTML新秘訣，拿走不謝！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

初始 HTML

邊框樣式

可單獨針對某一方向設置邊框樣式

border-style 說明

border-style 樣式屬性值

邊框粗細

可單獨針對某一方向設置邊框粗細

border-width 說明

邊框顏色

可單獨針對某一方向設置邊框顏色

border-color 說明

border 是復合屬性

教你用 CSS 畫個三角形

邊框樣式

基本樣式

簡寫樣式

邊框四邊寬度樣式

圖像邊框樣式（border-image）

圓角邊框樣式 (border-radius)

您的項目需求