一、半透明边框
1.疑问
我们想给一个容器设置一层白色背景和一道半透明白色边框,然后使body的背景从半透明框透上来。我们会这么写:
border: 10px solid rdba(255, 255, 255, .5);
background: white;
看到结果其实我是挺迷的,边框哪去了,使用半透明颜色为什么实现不了半透明边框啊?看到的效果就是和一个纯白的边框一样。
打开开发者工具发现边框其实是有的,但是我们给盒子设了一个白色背景,border边框层的层级是在背景颜色层之上的,默认情况下,背景会延伸到边框所在的区域下层,把边框实线换成虚线,把边框颜色换成其他颜色就可以看出来了。
2.解决方案
那要怎么样能让body的背景从半透明白色边框处透出来呢?可以通过 background-clip 属性调整,它的默认值是 border-box ,意味着背景会被元素的边框外沿层裁切掉。如果把属性值设为padding-box ,那么背景不会侵入边框所在范围。下图想要的效果就出来了!
border: 10px solid rdba(255, 255, 255, .5);
background: white;
background-clip: padding-box;
二、多重边框
我们用border属性可以很轻易的实现一个边框效果,但是如果我们想要实现多重边框呢?
1. box-shadow方案
这时可以用到 box-shadow 属性,我们熟知的是他有四个参数,x,y轴上的偏移量,模糊值,以及颜色,其实他还能接受参数—扩张半径。如下代码可以得到一个用border属性生成的完全一样的边框效果。
background: skyblue;
box-shadow: 0 0 0 10px slateblue;
box-shadow 支持逗号分隔符语法,可以创建任意数量的投影。
box-shadow: inset 0 0 0 10px slateblue, /*inset在内圈*/
0 0 0 15px yellowgreen,
0 0 0 20px steelblue,
0 2px 5px 25px pink;
2. outline方案
在一些情况下,可能只需要两层边框,那就可以先设置一层常规的border边框,再加上outline属性来设置外层边框,它的优点在于边框样式十分灵活,不像上面的box-shadow只能实现实现边框。
background-color: yellowgreen;
border: 10px solid #656;
outline: 5px solid pink;
outline的另一个好处在于他可以通过outline-offset属性来控制它跟元素边缘之间的间距,这个属性还可以接受负值,举个栗子,下面实现缝边效果。
background-color: yellowgreen;
border-radius: 10px;
outline: 2px dashed #fff;
outline-offset: -10px;
注意:
- outline只适用于双层“边框”的场景,因为outline不能接受用逗号分隔的多个值,如果需要更多层的边框,就必须用box-shadow了。
- outline产生的边框不一定贴合border-radius产生的圆角,如果元素是圆角的,他的描边(outline)可能还是直角的。
三、灵活的背景定位
有时候,我们想针对容器某个角对背景图片做偏移定位,像下面这样:
1.background-position方案
background: rgb(134, 78, 78) url(./images/allow.png) no-repeat;
background-position: 100% 100%;
/* background-position: right 0 bottom 0; 一样的效果*/
2.background-origin方案
在给背景图片设置距离某个角的偏移量时,有一种情况极其常见:偏移量与容器的内边距一致。如果采用background-position语法方案,代码是这样的:
padding: 10px;
background: rgb(134, 78, 78) url(./images/allow.png) no-repeat;
background-position: right 10px bottom 10px;
结果显示background-position方案起作用了,能使偏移量和容器的内边距一样,但一旦要改动内边距的值,要在三个地方更新这个值呢!还有一个简单的方法能让它自动的跟着内边距走。
我们知道每个元素有存在三个框,border box,padding box和content box。background-position: top left; 这个top left指的左上角是哪个左上角?
但其实在默认情况下background-position是以 padding box为准,这样边框不会遮住背景图片。而background-origin(默认值为padding-box)可以设为content-box,那么background-position属性使用的边角关键字将会以内容区边缘为基准,那么此时背景图片距离边角的偏移量就和内边距保持一致了。
padding: 10px;
border: 10px solid pink;
background: rgb(134, 78, 78) url(./images/allow.png) no-repeat;
background-position: right bottom;
background-origin: content-box;
四、边框内圆角
有时我们需要一个容器,只在内侧有圆角,而边框或描边的四个角在外 部仍然保持直角的形状。
我们可以叠加使用box-shadow和outline属性,描边不会受元素的圆角影响,box-shadow刚好可以填补描边与容器圆角之间的空隙。
只设置描边无box-shadow的扩张半径时:
background-color: yellowgreen;
border-radius: 10px;
outline: 8px solid #655;
同时设置时:
background-color: yellowgreen;
border-radius: 10px;
outline: 8px solid #655;
box-shadow: 0 0 0 8px #655;