文章目录[隐藏]
在写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就是了解变理解再变熟练,不要让网上的教程学死了,要灵活变通,才能提升开发效率。
没有回复内容