CSS Tips

1.半透明边框
border:10px solid hsla(0,0%,100%,.5);
background:white;
需要加上 background-clip:padding-box; 浏览器就会用内边距的外沿把背景裁切掉

tips:hsla可以使用rbga代替 rgba(255,255,255,.5)

2.多重边框
background:red;
box-shadow:0 0 0 10px #655; //10px 表示扩张半径
//多重 box-shadow:0 0 0 10px #655 , 0 0 0 15px red;
第二组的15px 实际显示只有5px 因为box-shadow是层层叠加的，第一层投影位于最顶层
box-shadow 不会影响布局，也不会受到box-sizing属性的影响
并且不会响应鼠标事件，可以通过加上inset来使投影绘制在元素的内圈，不过此时需要增加额外的内边距来腾出足够的空隙

3.背景定位
background:url(xxx.png) no-repeat right bottom #000; //回退方案
background-position:right 10px bottom 20px; //css3 新增参数
background-position 是以padding-box为准 但是可以通过background-origin 来调整 例如 background-origin:content-box;

tips:calc方案
上面的例子 background-position:calc(100% - 10px) calc(100% - 10px); 第一个参数 距离顶部 第二个 距离左边 calc()函数内部的-和+运算符的两侧需要加上一个空白符 否则会产生解析错误

4.平行四边形

利用元素的伪类去做拉伸，可以解决文字拉伸的问题，还有其他的效果都可以这么做，比如rotate

5.菱形图片 img 的scale需要放大为1.42倍 才能填满父元素的空白 这里是正方形的图片

另外一种解决方案 利用clip-path 兼容性不是太好 并且需要加上-webkit-前缀 这里就不需要考虑图片的形状了
polygon 参数
x:0 最左边 x:100% 表示最右边
y:0 最上边 y:100% 最下边

6.切角效果
http://dabblet.com/gist/2937c990d6bfad274740

圆形切角
http://dabblet.com/gist/24484257bc6cf7076a8e

7.梯形标签页
http://dabblet.com/gist/1345dc9399dc8e794502

8.单侧投影

box-shadow 的第4个参数是扩张半径 这个值会根据指定的值去扩大或缩小投影的尺寸，如果这个值为负的扩张半径，并且和模糊半径一样 那么投影尺寸就回和所属元素的尺寸完全一致，除非用前2个偏移量移动，否则将完全看不见任何投影
双侧投影 就是把单侧投影运用两次

9.文字图片

10.渐变边框

.container {
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
.container:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url("bg.png") repeat;
  left: 0;
  top: 0;}