读《CSS.Secrets》，记录下——box-shadow，outline

首先，要感谢CSS一姐——Lea Verou，感谢写了这样的一本书，为推广CSS3新属性所做出的努力。

这本书我刚开了个头，得来不易。看到了outline这个属性在一姐的“调教”下各种骚浪，挺过瘾的。怕忘了，记录下，也是跟大家分享下。

先介绍个有趣的，box-shadow。

代码片：

 .box-shadow {
            margin: 100px  auto 0;
            width: 100px;height: 100px;background: yellowgreen;
            box-shadow: 0 0 0 10px #333333,0 0 0 15px #0aa,0 5px 5px 20px rgba(0,0,0,.5);
            }

<div class="box-shadow">

然后会出现这样的效果：

是的，你没看错！这出现了跟border：solid；一样的效果。

区别在于：

1. 阴影不影响布局，如果用border属性来写，那么div盒模型的width就得改变，肯定会影响布局的。
2. 需要注意的是，阴影是不触发鼠标的hover，click，而border可以。
3. box-shadow可以定义若干个，而border与outline至多只能各定义一个。

好了。我们来看看outline。

传统印象中，outline是用于外边框的，可以把一整个div盒模型包进去。

来看看Lea Verou是怎么认为的。

代码片：

.box-outline{
            margin: 100px  auto 0;
            width: 100px;height: 100px;
            background: yellowgreen;
            border: 10px solid #333333;
            outline: 5px solid #0aa;
        }
<div class="box-shadow">        

很好，这样用outline可以实现之前的效果。

别在意，看着瘦小些，只是没有阴影而已，像素是一样的。

好了，这里的outline在W3C手册里说，outline-offset不可为负值。

请看下面：

代码片：

.outline {
            width: 200px;
        height: 200px;
        margin: 0 auto;background: black;
            border: solid 3px yellowgreen;
            outline: 1px dashed #00cfdd;
            outline-offset: -15px;
        }
<div class="outline"></div>

丢在chrome里，能看到的是：

哦唷，outline跑到element里面去嘞！outline-offset: -15px;
负值赋予了outline一个新的境界。

有得必有失，有一些小限制：

1. 这只在两个“border”里起作用。即outline是不可以定义若干个的
2. outline不兼容圆角属性。
   

分享到此，若有错，请指出，谢谢。