整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
order 盒子边框
复合属性。设置对象边框的特性。
盒子边框三要素：
① 边框粗细
② 边框样式
③ 边框颜色
语法：border: border-width | border-style | border-color ;
边框四边的粗细、样式、颜色，以及上下左右每个位置的样式属性都是可以单独调整的。
边框的颜色不是必要的，如果不指定颜色，默认颜色为黑色，但必须为盒子指定宽高。
<!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 代码
如果需要设置不同方向的样式属性，可以写在一句 CSS 代码里，比如说下面这段代码，上下实线，左右虚线。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}效果：
属性值解释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 代码
如果需要设置不同方向的边框粗细，可以写在一句 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-color 也是相同使用方法，此处就不做示例了。
如果你需要同时设置盒子的粗细、样式、颜色，那么你可以将他们的样式表写在同一行代码里。
例如：
/* CSS代码 */
div{
border-top: 5px solid red;
}这段代码指定了上边框的三个属性：粗细、样式、颜色
border-top 包含了：
其他同理
先来看一个示例
/* 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;
}效果：
把另外三条边透明之后，就只剩一个三角形了。
完
部分资料引用自：
们学习如何应用CSS给元素添加边框。
CSS边框属性，允许我们指定一个元素边框的样式、宽度和颜色。
我们先来学习元素边框的样式。border-style 属性指定了要显示什么样的边框。允许使用以下的值：
dotted，定义一个点状的边框
dashed ，定义一个虚线边框
solid，定义一个实线边框
double，定义一个双倍的边框
none，定义无边框
hidden，定义一个隐藏的边框
我们来实验一下。
创建一个 009-css-borders 文件夹，在文件夹里创建一个 css-borders.html 文件和一个border-style.css 文件。
构建 html 基础代码，引入样式文件。
编写 p.dotted 回车，填入文本点状的边框。按照同样的方法，添加其他的几个边框结构。
<p>点状的边框</p>
<p>虚线边框</p>
<p>实线边框</p>
<p>双倍的边框</p>
<p>无边框</p>
<p>隐藏的边框</p>
<p>混合边框</p>
<p>速记边框</p>
在 css 里定义 p.dotted 选择器，声明样式 border-style: dotted。定义其他几个选择器，全部声明 border-style 属性，值分别为：dashed、solid、double、none、hidden。
在浏览器里查看结果，边框的效果都做好了。
border-style: none 和 border-style: hidden 视觉上都不显示边框，有什么区别呢？
在 html 里编写：table 大于 括号 tr 大于 td 乘以3 再乘以3 （table>(tr>td*3)*3）。回车，创建一个3行3列的表格。给 table 元素定义border属性，值为 1。 给第二行第一个和第二个td 定义 class属性，值分别为 lm、m。
在 css 里定义 table 选择器，声明样式 border-collapse: collapse，让表格线细一些。这个属性我们在后面会详细讲解。
定义 td.lm 选择器，声明样式 border-style: dashed。定义 td.m 选择器，声明样式 text-align: center。
看一下效果，左中和左上、中以及左下边框是相邻的，在这些单元格上定义边框样式一定会产生冲突。
给 td.m 选择器添加样式声明 border-style: none。
我们看，没有去掉任何边框。
再把 border-style 属性值改为 hidden。
我们再看，中间的 td 边框消失了，当然，左侧相邻的边框也消失了。
当表格单元格相邻边框产生冲突时，border-style: hidden 优先级最高，border-style: solid 优先级次之，border-style: none 优先级最低。
还是这个表格示例，单元格左中和中之间用点线来分隔。如何实现呢？
在 td.m 选择器里将 border-style 的值改为 dotted。
很显然，并不是我们要的效果。看来，得把单元格左中的右边线隐藏。如何控制一条边框线呢？
可以在 border-style 中间添加一个表示方位的词，就可以设置单个边框线了。
比如，给 td.lm 选择器声明 border-right-style 属性，就可以设置这个单元格右边框样式了，这里设置的值为 none。
效果实现了。
把这里的 border-right-style 的值设置为 hidden 是什么效果呢
通过这个例子发现，可以分别指定每个边框的样式。这些属性有 border-top-style、border-right-style、border-bottom-style、border-left-style，用来设置元素的上、右、下、左边框的样式。
除了单个样式属性外，border-style 的属性值，还可以使用混合的简写方法。有四种写法：
第一种写法：四个值，分别代表上边、右边、下边、左边的边框样式。从顶部开始，按照顺时针方向来设置值。比如 border-style: dotted solid double dashed，设置上边框为虚线、右边框为实线、下边框为双线、左边框为虚线。
第二种写法：三个值，分别代表上边、左右边、下边的边框样式。第一个值表示上边框的样式、第二个值表示左边和右边框的样式，第三个值表示下边框的样式。比如 border-style: dotted solid double，设置顶部边框为虚线、左右边框为实线，底部边框是双线。
第三种写法：两个值，分别表示上下边，左右边的边框样式。第一个值表示上下边框的样式、第二个值表示左右边框的样式。比如 border-style: dotted solid，设置顶部和底部的边框是点状的、右边和左边的边框是实心的。
第四种写法：一个值，表示四个边框的样式。比如 border-style: dotted，四个边都是点状边框。
在 html 里添加一个 p 元素，定义 属性。填入一些文本。
在 css 里定义 p.mix 选择器，声明样式 border-style: dotted dashed solid double。
最后一个段落的混合边框实现了。
除了设置边框样式，还可以设置边框的宽度。
border-width 属性用于设置四个边框的宽度。宽度可以被设置为一个特定的尺寸，以 px、em等为单位，或者使用三个预定义的值： thin、medium、thick——薄、中、厚。
给前三个 p 元素全部声明 border-width 样式属性，值分别为 5px，0.5em，thick。
三个段落的边框线宽度就添加好了。
和边框样式 border-style 属性一样，边框宽度的值也可以使用混合的简写方法，可以给 border-width 设置四个值、三个值、两个值或一个值。
给第四个 p 元素添加 border-width: 5px 10px; 样式。
我们看，这个边框宽度上下是 5 像素，左右是 10 像素。
再给最后一个 p 元素添加 border-width: 2px 3px 4px 5px 样式。
这样，四边不同的边框，就拥有了不同的宽度！
除了设置边框样式，还可以设置边框的颜色。
border-color 属性用于设置四个边框的颜色。可以通过颜色名称、十六进制颜色值、RGB颜色值来设置颜色，也可以通过 transparent 来设置透明。
给前三个 p 元素全部声明 border-color 样式属性，值分别为 red，#00ff00，rgb(0, 0, 255)。
三个段落的边框线颜色就添加好了。
和边框样式 border-style 属性一样，边框颜色的值也可以使用混合的简写方法，可以给 border-color 设置四个值、三个值、两个值或一个值。
给第四个 p 元素添加 border-color: purple orange 样式。
我们看，这个边框上下是紫色，左右是橙色。
再给最后一个 p 元素添加 border-color: red green blue yellow 样式。
这样，四边不同的边框，就拥有了不同的颜色！
和字体 font 属性一样，边框也可以使用速记属性。为了缩短代码，可以在一个 border 属性中指定 border-style、border-width、border-color 等单独的边框属性。比如：border: 5px solid red，表示设置元素的边框宽度为5像素，边框样式为实线，边框颜色为红色。
注意，border-style 是必须要声明的，其他两个可以省略，省略后会采用 1 像素、黑色线这两个默认值。
在 html 里添加一个 p 元素，定义 属性。填入一些文本。
在 css 里定义 p.shorthand 选择器，声明样式 border: 5px solid #ccc。
一行样式代码就实现了边框样式、宽度和颜色的设置！
这个简写的方法默认四个边，全部定义了相同的边框。能不能定义单个边呢？可以的！
很自然的猜到，通过声明 border-top，border-right，border-bottom，border-left 四个属性，值为上面简写的方式，就可以单独定义元素的某一条边了。
注释掉这行代码，再声明一个 border-bottom 属性，值同样是 5px solid #ccc。
一行代码，同样实现了一条底部的边框线
置边框最常使用border，比如这样：
border: 1px dashed #333;这是最常规的方法了，今天再来说说其他两种方法，
这也算是一种比较常规的方法了，
outline: 1px solid;
但需要注意的是，outline是在容器的最外部，与border的渲染还是有点区别的，同时对比下：
border: 1px dashed #333;
outline: 1px solid;
外部实线是outline，内部虚线是border，为了一致，可以设置outline-offset往内缩一点：
outline-offset: -1px;
这是本文的重点，我也是刚get到此项技能，之前一直不知道background居然如此强大，直接上代码：
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;
这里我们只设置了上面看，而且还是虚线的，做一说明这种方式的强大，再把其他边框补上去：
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
#ffffff;
可见，使用background非常的灵活，边框的位置可以任意调整。
现在我们已经掌握这几方式，但本文的重点是上面这种，我们现在来动手操练下：
background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
,
linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
#eee;
.box {
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.box:hover {
animation: linearGradientMove .3s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
}
}
.box {
background:
linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
linear-gradient(0deg, #FF8235,#30E8BF, #FF8235) repeat-y,
linear-gradient(0deg, #FF8235,#30E8BF, #FF8235) repeat-y;
background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.box:hover {
animation: linearGradientMove 1s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
}
}
以上就是设置边框的几个小技巧。
参考：
https://www.cnblogs.com/coco1s/p/14291567.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
