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屬性實現簡單的縫邊效果