border 设置边框

给盒子模型设置边框时，边框宽度，边框颜色，边框样式，三种样式缺一不可，大部分浏览器中，边框的宽度和颜色都是有默认值的，而边框的样式默认值是none。

例如，我们给边框样式设置样式为 solid ，边框颜色设置为 red ,边框宽度设置为 5px ，效果显示如右图，会是一个5像素红色实线的边框。

设置边框的宽度

1、使用border-width可以分别指定四个边框的宽度，如果在border-width中指定了四个值，则四个值的顺序是上右下左。

border-width: 5px 10px 15px 20px;

当我们设置如上代码后，显示效果将会是，上边框为5px，右边框为10px，下边框为15px，左边框为20px。

如果指定三个值，则三个值分别设置给上左右下。如果指定两个值，则两个值会分别设置给上下和左右，当设置一个值的时候，则四边全都是该值，四个边的值一样。

除了使用border-width来设置宽度，还可以用 border-top-width、border-right-width、border-bottom-width、border-left-width，来分别设置四个边的宽度。

设置边框颜色

我们可以用 border-color 给边框设值颜色，边框的颜色也可以和边框的宽度一样，设置四个值三个值两个值一个值，也提供了四个方向的值 border-XXX-color（top right bottom left），来分别设置四条边的颜色。

设置边框样式

我们将用 border-style 来设置边框的样式，border-style 有五种属性如下表。

border-style 属性
none	没有边框样式，默认值
solid	设置边框为实现
dashed	设置边框为点状线
double	设置边框为双实线
dashed	设置边框为虚线

因为 none 是默认值没有样式，所以我只演示其他四种样式。

border-style 也可以同时设置四种样式，给四条边分别设置不同的边框样式。

边框样式的简写，通过 border 可以同时设置四个边框的样式，宽度、颜色、而且没有任何的顺序要求，border一指定就是同时指定四个边，不能分别指定。如下我们设置四个边的宽度为5px，实线，红色。

border: 5px solid red;

border-top border-right border-bottom border-left，可以单独设置四个边的样式，规则和border一样，只不过它只针对一条边生效。

盒子模型的边框及样式相关推荐

【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录一.盒子模型圆角边框二.代码示例 1.代码示例 - 正常矩形边框 2.代码示例 - 圆形边框 3.代码示例 - 圆角矩形边框 4.代码示例 - 综合对比示例一.盒子模型圆角边框在 CS ...
CSS基础(part10)--盒子模型之边框
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型盒子模型简介边框(border) 边框属性举个例子边框综合设置盒子边框写法总结表边框重叠设置盒子模型盒子模型简介 ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
（二）盒子模型之边框border
1.边框的组成及用法 border可以设置元素的边框,边框有三部分组成:边框宽度(粗细).边框样式.边框颜色. 语法: border:border-width | border-style | bor ...
JS助记 ----- 盒子模型与获取元素样式
盒子模型简单介绍 content-box 默认的盒子模型,width 和 height 设置的是 content 的大小,有border和padding的情况下再额外增加盒子的宽高,整个盒子的可视区大 ...
前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
html盒模型中border的写法,【前端】盒子模型的边框样式属性和应用技巧讲解
分割页面中不同的盒子,常常需要给元素设置边框效果.在CSS中边框属性包括边框样式属性(border-style).边框宽度属性(border-width).边框颜色属性(border-color).单 ...
css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
Web基础05 盒子模型01边框属性
首先要知道盒子模型用的标签是必备的是实体化三属性 width height background(背景属性) 边框属性 ①边框样式(border-style) border-style:上边[左边 ...

盒子模型的边框及样式

border 设置边框

设置边框的宽度

设置边框颜色

设置边框样式

盒子模型的边框及样式相关推荐

最新文章

热门文章