文章目录[隐藏]
在写css的时候，我们要为元素添加边框，往往会想到border：
ele{
border: 1px #f60 solid;
}border的意思是边框，1px代表边框的长度，#f60是边框的颜色，solid代表实心边框。
这样写看着很正常，但是假设我们遇到了一个业务场景：要制作一个类似于我的世界“书籍”的形状，类似于我的网站（全平台封杀，不再维护，已经跑路）MC服务器监测 (rxueit.cn)的样子。有很多细节需要边框来实现。
那么border能不能写多个呢？肯定不行。那么我们可以寻求其他办法解决。
outline
outline是一个兼容性很好的属性，翻译过来就是外部的线，可以作为边框使用，参数和border差不多：
outline: 1px #f60 solid;这样就可以再创建一个线条，并且与border共存。
我们在写为网站的时候，遇到了submit，button的input或者button元素，在点击时会出现一条黄色的边框，看起来有点影响美观，其实就是outline的结果，可以通过outline:none关闭。
box-shadow
box-shadow是一个兼容性也很好的属性，用于绘制外部阴影，语法如下：
box-shadow: <x偏移> <y偏移> <模糊扩散程度> <大小> <颜色>就比如（其中rgba部分为SASS写法，需要编译，请勿用于实际应用中）：
box-shadow: 0 0 10px 0 rgba(#000,0.3);这样就创建了一个模糊扩散程度为10的30%黑色透明的阴影。如果我们这样写，就可以创建一个没有模糊的阴影了：
box-shadow: 0 0 0 1px black;这样子x和y轴都处于正中心，也就是说向四面均匀扩散，模糊程度为0，就是看不到透明，1px代表大小，相当于border: 1px black solid;
inset
inset是box-shadow里面的一个属性，如果不使用inset，border-shadow默认向外扩散，如果添加inset，就向内扩散，但是我们知道，box-shadow里面可以用逗号隔开，创建无数个box-shadow。
box-shadow: 0 0 0 10px blue,inset 0 0 0 10px red;这样就创建了一个向外扩散10px蓝色的边框，以及一个向内扩散10px红色的边框。
N个边框
我们已经知道，box-shadow可以用逗号分开无数个box-shadow，那么我们可以使用x和y偏移创建无数个无与伦比的效果。
div{
width: 100px;
height: 100px;
border: 10px blue solid;
box-shadow: 40px 40px 0 10px #f60;
}这样就设置了一个长宽各100，蓝色10px边框，并且在左上顶点下方40px，右边40px处还有一个长100，宽100的透明的小框框。
具体是什么样子大家可以自行探索。
额外补充
我们在网站中，经常看到box-sizing: border-box。这串代码我最开始看着也是一脸懵。
后来才知道是什么意思，
box-sizing代表元素的长度计算方式，
如果默认，假设width:100px，padding: 20px，那么长度就等于本身的长度加上两边各一个20px（padding）的长度。这是padding-box。如果不设置border-sizing: padding-box（浏览器默认），那么长度不会变，padding会嵌在元素里面。
如果我们设置了border-box，那么元素的大小就是依靠边框来变的，那么padding-box，margin-box什么之类的都会失效：
*{
box-sizing: border-box;
}这在网站中有很大的作用，防止排版错乱。有的浏览器出现排版错乱问题，可能就是因为不支持box-sizing，大小的规律都写死了。这个属性也是近些年来才广泛出现。
学CSS就是了解变理解再变熟练，不要让网上的教程学死了，要灵活变通，才能提升开发效率。
没有回复内容