outline和outline-offset屬性實現簡單的縫邊效果
阿新 • • 發佈:2019-01-17
shadow 一個 htm com utf-8 實現 現在 自己 mar
如果現在有個需求,讓你實現下面的樣式,你會怎麽做呢?
我首先想到的是用 border + box-shadow 實現,代碼如下
div { margin: 50px auto; width: 200px; height: 100px; background: #655; border-radius: 5px; border: 1px dashed #fff; box-shadow: 0 0 0 10px #655; }
當時,我個人認為沒有其它方法可以實現了,直到後面在《css揭秘》一書當中看到了另外的方法,頓時豁然開朗
這個方法是用 css的 outline + outline-offset 屬性來實現的
下面,我用自己的理解來說說這個2屬性是什麽,因為官方的解釋對不熟悉這2個屬性的人來說會有點懵
簡單來說,outline屬性等同於border,都可以繪制邊框,可以看作是一條始終包裹在border外的邊框,如下圖
如上圖,棕色是border,桃紅色是 outline,只要border和outline屬性同時作用於同一個元素,outline繪制的邊框始終會在border外面
另外,如果你想給一個元素增加一條邊框,使用 outline 或 border 都可以
在來說說outline-offset屬性,可以簡單理解為控制outline繪制的邊框和border邊框之間的距離,如下圖
另外,outline-offset屬性還可接收負值,正是這個特性,讓我們能夠實現縫邊的效果,代碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { margin: 50px auto; width: 200px; height: 100px; background: #655; border-radius: 5px; outline: 1px dashed #fff; outline-offset: -15px; } </style> </head> <body> <div></div> </body> </html>
outline和outline-offset屬性實現簡單的縫邊效果