知乎導航欄，關注按鈕等元素的「凸起」效果是怎麼做的？能否不用圖片，用純 CSS 實現？

01-26

知乎的關注按鈕本來就是純 CSS。

導航欄，或許是因為加了一些雜點所以用 CSS 製作起來不太方便。如果是純漸變，那麼用 CSS 也沒問題。

gradient、box-shadow、border……這些都是很基本的 CSS 技法啊，拿 inspector 看看不就知道是怎麼做的了。

理論上沒有特別色彩和光照變化的按鈕都可以用 CSS3等代碼方式實現。可能細節上無法做到與 PS等軟體一致。

這樣層度的UI，CSS3很沒問題，CSS3都能用來畫圖標了……

知乎的關注按鈕本來就是CSS寫的可以直接看源代碼/CSS

導航欄：

{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background-color: #9bcb4a;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.77), inset 0 1px #20a5e3;

-moz-box-shadow: 0 1px 1px rgba(0,0,0,.77), inset 0 1px #20a5e3;
box-shadow: 0 1px 1px rgba(0,0,0,.77), inset 0 1px #20a5e3;
border: solid 1px #004ba6;
background-image: -webkit-linear-gradient(bottom, #0570c1, #1893dd);
background-image: -moz-linear-gradient(bottom, #0570c1, #1893dd);

background-image: -o-linear-gradient(bottom, #0570c1, #1893dd);
background-image: -ms-linear-gradient(bottom, #0570c1, #1893dd);
background-image: linear-gradient(to top, #0570c1, #1893dd);
}

大致對，不保證一模一樣

現在CSS3標準還沒定所以好多內容得重複寫好幾條比較內啥……

bootstrap的純CSS按鈕做的很好，可以參照學習。不過一想到要兼容IE678，呵呵。

http://twitter.github.com/bootstrap/

用陰影，邊框可以實現的

推薦使用http://buttoncssgenerator.com ，可以生成各種效果的按鈕css，包括圓角、漸進顏色、陰影，併兼容各大主流瀏覽器

用火狐插件 Firebug。按一下f12。css都是浮雲。

http://www.byywee.com/page/M0/S258/258746.html

純CSS按鈕·

菜單上「首頁」、「話題」、「通知」等文字是用 text-shadow: 0 1px 1px rgba(0,0,0,0.5) 來實現的；

如果是在深底色上面，一般文字底部 1px 的陰影都是用亮色，比如「關注」兩個字的雕刻效果的實現。

按鈕部分的陰影，用圖片或用 box-shadow 都可以。