border概述

每个边框有3个方面：样式（或外观）、颜色、以及其宽度（粗细），下面我们分别重点解释这三项。
边框样式（border-style）
设置元素所有边框的样式，或者单独地为各边设置边框样式。它有10个属性值，分别是：

none: 无样式；
hidden: 同样是无样式，主要用于解决和表格的边框冲突；
dotted: 点划线；
dashed: 虚线；
solid: 实线；
double: 双线,两条线加上中间的空白等于border-width的取值；
groove: 槽状；
ridge: 脊状,和groove相反；
inset: 凹陷；
outset:凸出,和inset相反；

其中groove、ridge、inset、outset有些像3D效果，它的效果受border-color的影响。 border-style作用在四个方向时所用的方法和前面曾讲过的padding属性的书写方法相同，如果它书写四个参数值，将按照上-右-下-左的顺序定义边框。如果只设置一个，将用于四个边框统一设置。如果设置两个值，第一个作用于上下，第二个则作用与左右。如果设置三个值，第一个作用于上边框，第二个作用于左右边框，第三个作用于下边框.

边框颜色（border-color）
这个属性用来定义所有边框颜色，或者为四个边分别设置颜色。它可以取颜色的值或被设置为透明（transparent）。示例：

.colorful {border-style:solid;border-color:gray;}

border-color属性值的个数与其所对应方向的边框效果的设置方法和border-style的设置方法相同，可参照border-style属性学习理解。需要注意的是在border-color前最好先设置border-style，否则border-color可能会不显示。

边框宽度（border-width）
border-width可定义四个边框的宽度，即边框的粗细程度，它有四个可选属性值：

medium (是缺省值，通常大约是2像素)
thin(比medium细)
thick(比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者相对长度单位 (em, ex, px)。

border-width属性值设置的个数与所对应方向产生的效果和border-style、border-color的设置方法相同，可参照border-style、border-color属性学习理解。

边框（border）
border是一个综合性写法，它设置的是四个边框的宽度、样式和颜色，不能对某一个边框单独设置。它的格式：

border: border-width border-style border-color;

示例：

.bk01 {border:3px solid #FF0000;}

单边边框的设置方法
除了以上介绍的几种属性，还有几种属性可以单独定义各方向的边框。下面对它们进行分类介绍。
设定上边框属性： border-top，它的设置格式和border相同，依次设置宽度、样式、颜色：

border-top: border-width border-style border-color;

border-top是将宽度、样式、颜色三种属性值放在一起设置的属性，如果要单独设置其中的任意一项也可以使用以下属性：border-top-width（单独设置上边框宽度）、border-style（单独设置上边框样式）、border-color（单独设置上边框颜色）。示例：

#sbk01 {
border-top-width:1px;
border-top-style:dashed;
border-top-color:#FF0000;
}
/设置上边框为宽度1像素的红色虚线/}

以上的效果如果用border-top来设置的话更简单一些，代码如下：

#sbk01 { border-top:1px dashed #FF0000; }

设定右边框属性：border-right，border-right-width，border-right-style，border-right-color，设置方法同border-top。设定下边框属性：border-bottom，border-bottom-width，border-bottom-style，border-bottom-color，设置方法同border-top。设定左边框属性：border-left，border-left-width，border-left-style，border-left-color，设置方法同border-top。

border-style 属性

实例
设置 4 个边框的样式：

p
{
border-style:solid;
}

定义和用法
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

只有当这个值不是 none 时边框才可能出现。

例子 1

border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

例子 2

border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线

例子 3
border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线

例子 4
border-style:dotted;
所有 4 个边框都是点状

可能的值

值	描述
none	定义无边框。
hidden	hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

描述
最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。

Qt边框border概述相关推荐

前端开发_HTML5_CSS部分-边框(border)
边框样式 1.概述我们之前已经把CSS的选择器学习了一遍,接下来,我们就一起来学习一下一些常见的样式属性,我们从边框样式开始学习. 2.边框样式 CSS中使用关键字border实现指定元素边框的样式 ...
css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
3、CSS 边框border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS边框属性允许你指定一个元素边框的样式和颜色. CSS 边框 ...
Qt Creator IDE概述
Qt Creator IDE概述 IDE概述管理项目设计用户界面编码建立和运行测验出版 IDE概述 Qt Creator是一个集成开发环境(IDE),可为您提供使用Qt应用程序框架设计和开 ...
边框border(HTML、CSS)
边框border(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charse ...
盒子模型之边框border
边框border属性:border-width,border-style,border-color 由于相邻边框会导致边框width变为border-width的2倍,此时可以将相邻边框进行合并,即使 ...
CSS盒子边框(border)样式综合样式
CSS盒子边框(border) 语法: border : border-width ll border-style ll border-color 边框的样式: none:没有边框即忽略所有边框的宽度 ...
css边框(border)属性
border属性代码如下: border:边框宽度边框风格边框颜色; 如:border:5px solid #555; 属性: (1)边框宽度: border-width:5px; (2)边框颜 ...
Qt网络编程概述（一）
分享主题 Qt网络编程概述(一) Qt网络编程之QTCPSocket和QTCPServer实例(二) Qt网络编程之QUdpSocket实例(三) Qt网络编程概述 QtNetWork模块提供了若干类 ...

Qt边框border概述

border概述

border-style 属性

Qt边框border概述相关推荐

最新文章

热门文章