DIV CSS 佈局教程網

Step 06

留意樣圖的圖標上方有一道高光，而且不是常見的單像素放射高光（大約為兩個像素的高光處上面的1px高光要亮於下面的1px），因此可以考慮用Ellipse這種橢圓形的放射性填充達到這種效果。

我們選中並復制最底的圓角矩形兩次，移動位置後得到兩個上下相隔2px的圓角矩形，用兩個矩形路徑相減的方法得到一個新的路徑，對其進行Ellipse填充（白色0-100透明度），最後把這個高光路徑的疊加方式設置為Overlay。

Step 07

底部加個1px高光。

Step 08

現在的結果如下圖，先歇一會兒，喝口茶，接下來我們進行細節的添加。