假設我們有這樣乙個簡單的結構：
>
div>
div
經過一番嘗試，修改上述 div 的 outline-offset為 -118px。
div
很有意思，我嘗試了很多不同的情況，最後總結了乙個簡單的規律，要使用負的 outline-offset 生成乙個加號有一些簡單的限制：
容器得是個正方形
outline 邊框本身的寬度不能太小
outline-offset 負值 x 的取值範圍為:
-(容器寬度的一半 + outline寬度的一半) < x < -(容器寬度的一半 + outline寬度)
下文就再介紹一些 css 負值有意思的使用場景。
先說單側投影，關於 box-shadow，大部分時候，我們使用它都是用來生成乙個兩側的投影，或者乙個四側的投影。
ok，那如果要生成乙個單側的投影呢？
我們來看看 box-shadow 的用法定義：
這裡有乙個小技巧，擴張半徑可以為負值。
繼續，如果陰影的模糊半徑，與負的擴張半徑一致，那麼我們將看不到任何陰影，因為生成的陰影將被包含在原來的元素之下，除非給它設定乙個方向的偏移量。所以這個時候，我們給定乙個方向的偏移值，即可實現單側投影
通常，我們要實現乙個元素的 180° 翻轉，我們會使用 transform: rotate(180deg)，這裡有個小技巧，使用 transform: scale(-1) 可以達到同樣的效果。如下既可:
class
="scale"
>
css nagative scale(-1)p
>
.scale
@keyframes scale
100%
}
在 flexbox 布局規範還沒流行之前，實現多行等高布局還是需要下一番功夫的。其中一種方法便是使用正 padding 負 margin 相消的方法。
有如下乙個布局
左右兩欄的內容都是不確定的，也就是高度未知。但是希望無論左側內容較多還是右側內容較多，兩欄的高度始終保持一致。
ok，其中一種 hack 辦法便是使用乙個很大的正 padding 和相同的負 margin 相消的方法填充左右兩欄：
.g-left
.g-right
使用負 marign隱藏列表 li 首尾多餘的邊框
使用負 text-indent 實現文字的隱藏
使用負的 z-index 參與層疊上下文排序
還有一些很深奧的，譬如張鑫旭大大在今年的 css 大會上分享的，利用負的 opacity 在 css 中實現了偽條件判斷，配合 css 自定義屬性，使用純 css 實現 360° 的餅圖效果
css你所不知道技巧
當元素沒有文字內容，但有href屬性的時候，顯示它的href屬性 table layout fixed可以讓每個格仔保持等寬 table max height與 overflow hidden 一起來建立純 css 的滑塊 slider slider hover 使列表的每項都由逗號分隔 ul li...
你所「不知道」的高階搜尋技巧
日常生活中，我們不可避免要地和各種各樣的搜尋引擎 例如 baidu google等 打交道，但是你真正了解並學會合理地使用它們了嗎？本文就搜尋引擎的幾個常用高階搜尋指令 做了簡要的介紹。搜尋引擎會派出一種我們稱之為蜘蛛 spider 的程式，它能夠在網上爬行 發現新網頁並抓取頁面檔案進行分解 分析，...
你所不知道的 const
const 常量是不可修改的，也就是說only read，例如 const int nbuffsize 512 nbuffsize 0 error就是因為const 常量不能修改，所以定義時必須初始化預設在全域性作用域中定義的非const變數可以在整個程式中訪問，例如 int ncounter ex...