cssborder-style的简单介绍
css---border的注意点
div{widht:100px;height:100pxborder-width:2px;}
上面这样的设置 div 在页面中实际站位是 104px，如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box;’，它在页面中实际宽度 =?width+border( 该公式仅针对上面例子）。
border-image-source背景图片源
border-image-slice需要展示出来图片的尺寸，如果这个量等于图片的尺寸就都相当于整个图片展示出来
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图片的填充形式
这个属性的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的一个很强大的属性，因为它可以自定义漂亮的边框，而不在是单调的线条。
这个属性使用并不太难，不过其中的border-image-slice属性在使用的时候有一个小技巧，就是当想要其中?image?不失真即不拉伸，slice?要和?width?一样。
例如：
.demo{border-width:20px;border-image-slice:20;}
.demo2{
? ? width: 100px;
? ? height: 100px;
? ? background: #ccc;
? ? border-width: 20px;
? ? border-style: solid;
? ? border-image-source: url(./../img/border-image.jpg);
? ? border-image-slice:20;
? ? border-image-outset:22px;
? ? border-image-repeat: repeat;
}
order-image?使用时候一定要设定?border-style?虽然这个属性没什么用，但是如果不设定它?border-image?就不生效。
border-image-slice?如果设定数值当?px?用时候直接写数字就可以 如果加上?px?反而会不生效。
border-width?用来设定边框的宽度，它决定图片边框展示的厚度(即围绕宽度)。
不要让?border-radius?的 % 值大于 50，因为如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。
如果用?rem、em?单位在移动端用border-radius?画圆，在部分机型里面是椭圆的问题，可以通过?50%?来解决 ，或者使用?px?配合缩放?scale?来实现?rem?单位的效果。
在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span?标签的圆角不一样因为?%?是参考长和宽计算的。
border-radius?圆角并不会隐藏标签内部元素的内容，如果有内容溢出的情况记得增加overflow:hidden;
任何元素都可以使用这个属性,包括视频、音频标签等。
一般情况下不推荐?border-top-left-radius?这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。
使用这个属性可以让页面更有立体感，给元素添加一个阴影，使得元素看起来是悬浮在原来的位置，下面就看看它的用法吧。
效果如下图
它主要用来告诉浏览器怎么计算元素的展示宽高的。
推荐大家设置?box-sizing?为border-box?这样方便我们写样式不必在去减去?padding?也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。如果不设置?box-sizing?不同浏览器会有不同的计算方式。
CSS加虚线是哪个属性？
在CSS 中常见的边框(border) 属性有以下几种：
border-style
border-width
border-color
border-top-, border-left-, border-bottom-, border-right-
border
border-style
border-style属性指定边框的样式。以下的表格列出这个属性可能有的值，以及每一个值显现出来的结果。
border-width
border-width属性是用来设定边框的宽度。可用的值为thin (薄)、medium (中等)、thick (厚)，或是一个数字。
border-color
border-color属性是用来设定边宽的颜色。
border-top-, border-left-, border-bottom-, border-right-
我们可以将方向(top -上、bottom -下、left -左、right -右)和样式、宽度、及颜色合起来而成为一个属性。举例来说， border-top-style属性就是用来设定上边框的样式。以下举几个例子：
border
若四边的边框属性都一样，那我们可以用一个border属性来描述，而不必四个边都描述一次。另外，我们可以在同一行一次宣告边框样式、边框宽度、以及边框颜色。
p {
border:#0000FF 5px solid;?
}
那以下的HTML，
p用一行来宣布所有边框的属性/p ?
会显现出
css设置div只显示某一边的边框
在网页设计中经常用到css来设计各种边框样式以及颜色等，有时候需要一个p只显示一个边框，那么你可能会用到下面的一些方法。
一、CSS border-width 属性
border-width是实现显示边框的重要属性。用法如下：
border-width:top right bottom left
参数说明：
top：上边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
right：右边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
bottom：下边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
left：左边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
其中像素如：10px 20px等
内置样式有：
thin：定义细的边框；
medium:默认值，定义中等边框；
thick：定义粗的边框；
inherit：继承父元素的边框宽度。
二、CSS border-style 属性
border-style是用来设置边框线样式的，语法如下：
border-style:样式;
其中可设置的样式有：
none 定义无边框。
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 规定应该从父元素继承边框样式。
三、实例应用
只要定义边框不为0，即可显示边框（但是需要定义边框线样式），如果想要只显示下边框就相当于把top、right、left设置为0px；下边框不为0即可。
实例如下：
只显示下边框
显示如下：
如果想要只显示右边框只需要改border-width属性为 0 1px 0 0即可。
CSS中，border-style为dotted 时，为何左上角的两个会挨到一起？
没有，这里是代表连接点，需要实现这样的效果需要使用 html 5 的 canvas 来实现
CSS border（边框）样式写法总结
border属性 ：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法：border： border-width | border-style | border-color;
border-width ：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。
?border-top-width：设置元素上边框宽度
?border-right-width：设置元素右边框宽度
?border-bottom-width：设置元素下边框宽度
?border-left-width：设置元素左边框宽度
border-style ：边框样式。
?border-top-style：设置元素上边框样式
?border-right-style：设置元素右边框样式
?border-bottom-style：设置元素下边框样式
?border-left-style：设置元素左边框样式
?属性值有：
??none：无边框。
??hidden：隐藏边框。对于表，hidden 用于解决边框冲突。
??dotted：点状边框。
??dashed：虚线边框。
??solid：实线边框。
??double：双线边框。两条单线与其间隔的和等于指定的border-width值。
??groove：3D凹槽边框。
??ridge：3D垄状边框。
??inset：凹边框。
??outset：凸边框。
border-color ：边框颜色。
1.1 边框各样式效果图
1.2 四条边颜色样式相同
1.3 四条边颜色不同，样式相同
1.4 四条边颜色相同，样式不同
1.5 设置上边框宽度、样式、颜色
1.6 设置右边框宽度、样式、颜色
1.7 设置下边框宽度、样式、颜色
1.8 设置左边框宽度、样式、颜色
以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _
如何在css样式上的属性中添加border
定义和用法
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
默认值：
not specified ? ?
继承性：
no ? ?
版本：
CSS1 ? ?
JavaScript 语法：
object.style.border="3px solid blue" ? ?
可能的值
值
描述
border-width ? ?规定边框的宽度。参阅：border-width?中可能的值。 ?
border-style ? ?规定边框的样式。参阅：border-style?中可能的值。 ?
border-color ? ?规定边框的颜色。参阅：border-color?中可能的值。 ?
inherit ? ?规定应该从父元素继承 border 属性的设置。 ?
TIY 实例
所有边框属性在一个声明之中
本例演示用简写属性来将所有四个边框属性设置于同一声明中。