讀《CSS.Secrets》，記錄下——box-shadow，outline

首先，要感謝CSS一姐——Lea Verou，感謝寫了這樣的一本書，為推廣CSS3新屬性所做出的努力。

這本書我剛開了個頭，得來不易。看到了outline這個屬性在一姐的“調教”下各種騷浪，挺過瘾的。怕忘了，記錄下，也是跟大家分享下。

先介紹個有趣的，box-shadow。

代碼片：

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

<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: px  auto ;
            width: px;height: px;
            background: yellowgreen;
            border: px solid #333333;
            outline: px solid #0aa;
        }
<div class="box-shadow">        
           

很好，這樣用outline可以實作之前的效果。

别在意，看着瘦小些，隻是沒有陰影而已，像素是一樣的。

好了，這裡的outline在W3C手冊裡說，outline-offset不可為負值。

請看下面：

代碼片：

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

丢在chrome裡，能看到的是：

哦唷，outline跑到element裡面去嘞！

outline-offset: -15px;

負值賦予了outline一個新的境界。

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

1. 這隻在兩個“border”裡起作用。即outline是不可以定義若幹個的
2. outline不相容圓角屬性。

   

分享到此，若有錯，請指出，謝謝。