border是什么属性,border有哪些属性
网页基础之border属性
border,翻译成汉语为 边框，即给标签元素定义边框，如上小节《网页基础之background属性的介绍》中笔者使用到了border 的属性，如图：
border: 2px solid #666 拆分出来分别为 border-width 为 2px ， border-style 为 solid，border-color 为 #666。
border-style 有常用的四种风格，即 none(无边框)， dotted(点状边框)，solid(实心边框)，dashed(虚线边框)，还有一些复合边框，具体可以参考MDN；
border-width 和 border-color 继承了 width 和color 的定义方式，这里就不详细介绍了；
如何做一个简单的三角形，先给四个边的边框颜色都设置为透明色，然后在将左侧边框颜色设置为黑色或者其它颜色，这样一个三角形就做好了
本小节主要讲解了 border 的使用方式，通用定义模式和单独定义模式
深入理解border属性
1 .css属性是为了显示图文。
2 .边框设计的初衷可能是为了白底的图片和外面区分，所以加一个1px的边框就能看清
3 .边框一般不需要跟随设备变大而变大。
4 .所以其他属性outline,box-shadow,text-shadow也是这来原因而决定的.
1 .1px
2 .thin:1px
3 .medium:3px，默认值。主要是因为border-style:double。至少需要3px才生效
4 .thick:4px
1 .none:所以单纯设置border-width,border-color没有边框显示的原因. 1.5px solid #000 .默认样式是这样
2 .solid:实线
3 .dashed:虚线 :颜色区和透明区的比例所占的不一样，chrome是2:1，IE,火狐是3:1
4 .dotted:圆点边框
5 .double:双线板框。线框的表现还和宽度有关系，宽度不同最后的表现也不一样
6 .其他：inset（内凹）,out（外凹），沟槽（groove），ridge(山脊)
1 .border-color默认颜色是color色值，如果没有指定边框颜色，就会使用color的颜色,outline,,box-shadow,text-shadow也是这样
1 .右下方background定位技巧.background定位的一个局限是只能根据左上角定位，而不能相对右下角.一个宽度不固定的元素，我们需要在距离右边缘50像素的位置设置一个背景图片
2 .增加点击区域大小：通过使用透明边框可以增加点击区域的大小
border:50px solid transparent;
3 .三角形绘制
1 .背景图片相对于background-image属性的位置
2 .border-box
3 .content-box
4 .padding-box
1 .center:居中图片
2 .top.left
1 .上面构造出来的全等三角形，其实是由两个直角三角形拼接成的。
2 .所以如果设置某一条边的宽度是0，就可以只显示左边的，实现一个直角三角形
html中的border怎么 定义圆角？它的属性是什么？
border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。
以缩写方式写上、下、左、右边框单独CSS样式设置方法
1、1px黑色虚线上边框
border-top:1px dashed #000
2、1px黑色实线下边框
border-bottom:1px solid #000
3、1px黑色虚线左边框
border-left:1px dashed #000
4、1px黑色实线右边框
border-right:1px solid #000
通常使用主流浏览器兼容边框样式有：
1、实线边框：solid
Border:1px solid #000 设置对象1px（像素）宽厚的黑色实线边框。
2、虚线边框：dashed
Border:1px dashed #000 设置对象1px（像素）宽厚的黑色虚线边框。
【css】边框border的属性和使用方法
顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用border属性。
边框样式border-style必须写！否则其它属性全部失效。
边框的样式：
border后面可跟多个值，中间用空格分离，含义如下：
注意顺序， 边框样式不可省略 ，颜色和宽度可以省略，会显示默认的效果。
——以上规律在padding和margin一样适用。
边框样式border-style必须设置
如果我们的四条边框属性都是一样的，那么统一设置就可以啦，注意边框类型不可省略。
首先我们放置一个宽高为200px的粉色盒子。
接下来我们为它加上一条宽度为10px，样式为实线，颜色为红色的边框。
我们可以看到，添加边框的时候，是在盒子外面套一圈边框，而不是加在里面，在Chrome浏览器中点击右键检查，可以看到div的大小变成了220x220。
套在外面的边框的宽度是会加进盒子尺寸的（上下左右各增加了10px），如果我们想盒子保持大小不变，要对div本身的width和height进行减小，在这个样例中，通过计算可得，减少到180px即可保持大小不变。
当我们使用点状、虚线等边框样式时，多出来的缝隙，会使用元素本身的 背景颜色 填充。
点和虚线的具体样式，不同浏览器中可能会不一样。
我们为刚刚的盒子设置上边框为红色，左边框为绿色，效果如下图所示：
我们会发现在两条边框交界处的小方块，通过一条对角线分隔，上边框和左边框各占一半。当边框不一样宽时，同样也是用对角线把交界处的小长方形一分为二，如下图所示：
当被添加边框的元素宽度为0，不设置高度（高度默认是0）的情况下，我们可以巧妙利用 边框组合 和 transparent（透明） 绘制三角形，可以体验下哦。
三角形1-css：
三角形2-css：
多彩三角形-css：
绘制梯形只要对应添加宽度或者高度就可以啦
梯形1-css：
梯形2-css：