CSS之边框和背景

一、半透明边框

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;