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

过本文章，可以掌握以下内容：

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类来为组件添加阴影效果。示例：

信我或关注微信号：狮范儿，回复：学习，获取免费学习资源包。

在我们平时网页中，想必大家一定用过border，可以根据border给我们提供的各种属性实现盒子的边框效果，那么今天就给大家分享一下边框的应用。

常规姿势

在CSS1中就定义了边框样式属性：border设置全部或指定具体边框样式。具体包括指定样式：宽度：width、样式：style（none、solid、dotted、dashed等）、颜色：color。可以通过border统一设置边框样式，也可以通过border-left:width style color独立设置边框样式。这部分相对比较简单，下面我们来使用div示例及样式展示一下基本设置方法：

特殊姿势

我们都知道，标准盒子模型的大小会受content（width,height）、padding、border的影响，所以，即使一个盒子未设置内容大小，只要有边框或内边距，盒子也是会有大小的。我们就从这里出发，假若盒子未设置宽度和高度，我们给盒子增加了边框大小为10px,给每边边框设置不同的颜色来看一下：

假使只有上边框有颜色，其他边框的颜色均为透明：

此时我们就会得到一个三角小图标，是不是感觉很神奇。

再比如，我们给盒子设置width，再来观察下，你就会发现你得到了一个梯形。

借助其他样式合并输出姿势

border边框还能与border-radius一起来做出我们希望效果。例如：

再做一个月亮给你呀：

再送你一朵小花花：

最后做一个火热的爱心送给你呀~~

私信我或关注微信号：狮范儿，回复：学习，获取免费学习资源包。

在线咨询

上一篇：HTML字间距如何设置？#html
下一篇：html禁止浏览器文本框填充，烦人的记录都走开

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 中的 box-border 盒子边框详解

初始 HTML

边框样式

可单独针对某一方向设置边框样式

border-style 说明

border-style 样式属性值

边框粗细

可单独针对某一方向设置边框粗细

border-width 说明

边框颜色

可单独针对某一方向设置边框颜色

border-color 说明

border 是复合属性

教你用 CSS 画个三角形

基本样式

简写样式

边框四边宽度样式

图像边框样式（border-image）

圆角边框样式 (border-radius)

您的项目需求