css揭秘笔记——背景与边框

摘要：这是默认值背景图片延伸到边框，但是图片的起始位置是从开始的。偏移差别很明显吧问题是背景图片定位在右下角，据底部和右边，且容器大小不固定解决方案一种方法是在偏移量前面指定关键字。更改元素宽高，边框依然是连续的。

background-clip: [border-box] |[padding-box] | [content-box];

hsla(<色相>, <饱和度>, <明度>, <透明度>)
色相：0~360
饱和度：0%~1000% (0的时候也要加%！！！不然会出错)
明度： 0%（黑色）~100%（白色）
透明度：0~1

#### 难题：
正常情况下，想要达到半透明边框的效果，使用

border: 10px solid hsla(0,0%,100%,.5);
background: white;

这种方式不行，因为背景色延伸到border下面，半透明的边框反映的还是背景色。

#### 解决方案：

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip:padding-box;

这样就使背景只延伸到padding边沿。
半透明边框效果图

box-shadow:none|| inset && [    ];

outline: