阅读CSS Secrets（二）

如何减少不必要的媒体查询

1. 使用百分比代替固定宽度，当无法实现的时候，可以使用窗口的相对单位（vw，wh，vmin，vmax）可以解决一小部分窗口的宽度和高度
2. 当你想要固定宽度或者更大的分辨率的时候，使用max-width而不是width，可以适应相对小的分辨率从而避免使用媒体查询
3. 不要忘记使用max-width取代宽度100%的元素，比如img，object，video，iframe
4. 当我们需要用图片填充整个容器的时候，可以使用background-size：cover来实现不用理会容器的尺寸。然而考虑到边宽无限制后，而且在移动设计中缩小大图片的效果不理想
5. 当使用网格的行和列做图像布局或者其他的元素时，使列数由可视窗口的宽度来规定。灵活的盒子布局或者display：inline-block 和有规律的文本包装也可以减少媒体查询
   6.当使用多列文本时，指定列宽来替代列数，这样你可以只用修改一列带有争议的。

box-shadow

background:yellowgreen;
box-shadow:0 0 0 10px #655;

1.png

还可以再添一层

background:yellowgreen;
box-shadow:0 0 0 10px #655,0 0 0 15px deeppink;

2.png

不过这里要注意的是，第二层的spread阴影的尺寸为5PX时 写属性的时候要写成5+上一层的10 = 15px
这样才能显示出来，因为第一层是优先显示的，尺寸都是相对于div边框的

然后添加阴影添加边框

.test{
  border:2px solid yellow;
  background:yellowgreen;
  box-shadow:0 0 0 10px #655,0 0 0 15px deeppink,2px 5px 5px 15px rgba(0,0,0,.5)
}

3.png

尽管上面表现出很多类似border的特性但是还有几条忠告，

1. shadow不能当成border来用，因为他不会影响布局和盒模型。
2. 我们的方法演示了在元素的外面创建‘border’，然而它的shadow部分不会触发事件，比如hovering 或者clicking，

outline

当我们需要2个边框是可以使用outline，最有趣的一点是outline-offset可以接受负值，看下面

.test{
  width:100px;
  height:100px;
  margin:50px 0 0 50px;
  border:2px solid yellow;
  background:yellowgreen;
  outline:5px dashed black;
  border-radius:15px;
  outline-offset:-20px;
}

4.png

outline的轮廓不会随着元素的弧度轮廓而变成弧度，他一直都是长方形不会改变，

demo1.gif

再价格animate的动画 ！！真是有趣

$('.test').animate({
  'outlineOffset':'-70px'
},3000).animate({'outlineOffset':'-25px'},3000)