深入理解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

border-style类型

1 .none:所以单纯设置border-width,border-color没有边框显示的原因. 1.5px solid #000 .默认样式是这样

设置无边框样式
border-width:0
border-style:none

设置某一条边消失
border-bottom:none;

2 .solid:实线

3 .dashed:虚线 :颜色区和透明区的比例所占的不一样，chrome是2:1，IE,火狐是3:1

image.png

4 .dotted:圆点边框

image.png

1 .可以用这个来实现圆角边框
.box{
  width:150px;height:150px;
  overflow:hidden;
}
.dotted{
  width:100%;
height:100%;
border:149px dotted #eee;
}

5 .double:双线板框。线框的表现还和宽度有关系，宽度不同最后的表现也不一样

image.png

//实现三道岗
.box{
            width: 120px;
            height: 20px;
            border-top:60px double;
            border-bottom: 20px solid;
          }

6 .其他：inset（内凹）,out（外凹），沟槽（groove），ridge(山脊)

border-color和color

1 .border-color默认颜色是color色值，如果没有指定边框颜色，就会使用color的颜色,outline,,box-shadow,text-shadow也是这样

border与透明边框技巧

1 .右下方background定位技巧.background定位的一个局限是只能根据左上角定位，而不能相对右下角.一个宽度不固定的元素，我们需要在距离右边缘50像素的位置设置一个背景图片

width: 100vw;
            height: 100vh;
            border-right: 50px solid transparent;
            background: url('./baidu.jpg');
            background-repeat: no-repeat;
            background-position:100% 50%;
//background-position默认是padding来算的

2 .增加点击区域大小：通过使用透明边框可以增加点击区域的大小
border:50px solid transparent;

3 .三角形绘制

image.png

1 .本质就是div没有宽度，完全由border组成，然后只显示一条边，剩下的边是透明的就可以了
border-color: transparent transparent #eee transparent;
下边有颜色，那么箭头朝向是向上的

background-origin

1 .背景图片相对于background-image属性的位置
2 .border-box
3 .content-box
4 .padding-box

background-position:图片的位置，相对于background-origin

1 .center:居中图片
2 .top.left

border与图形构建

1 .上面构造出来的全等三角形，其实是由两个直角三角形拼接成的。
2 .所以如果设置某一条边的宽度是0，就可以只显示左边的，实现一个直角三角形

image.png