|
山頂角雖然是比較老的技術(shù)了，《精通CSS》一書中也有所介紹。在藍(lán)色搜索了一下，還沒有詳細(xì)介紹的文章。這篇文章的原作者是 Dan Cederholm，他同時(shí)也是Faux Column的發(fā)明者，《無(wú)懈可擊的Web設(shè)計(jì)》一書的作者，以及simplebits的站長(zhǎng)。
原文鏈接：Mountaintop Corners
翻譯鏈接：山頂角
翻譯注釋：原文中的"box"一律翻譯為“盒子”。文中提到TRON一詞，我也沒搞清是什么意思，如果您知道，希望可以到 論壇的翻譯板塊 幫忙解答一下，感激不盡。
或者是我嫌麻煩，不愿意去想更簡(jiǎn)單的創(chuàng)建圓角的方式，或者是我不害怕在幾年之后視力就會(huì)嚴(yán)重受損(那么就不會(huì)有山頂角這種方法了)。無(wú)論怎樣，我最常用的一個(gè)創(chuàng)建圖片的小技巧和山頂有關(guān)：想讓圓角更圓一點(diǎn)嗎？再加一個(gè)山峰就好了。你馬上就會(huì)了解上面這段話的意思了。
圖1
看看圖片1。一個(gè)平庸的盒子，每個(gè)角上都刪去了一像素。當(dāng)我們以100%的比例觀察的時(shí)候，會(huì)感覺這個(gè)盒子好像有那么一點(diǎn)點(diǎn)圓。在TRON成為尖端技術(shù)之后，這就成了其中的一個(gè)技巧。
更少像素 = 更圓
你可以讓圓角的幻覺更大一些，只要再刪掉幾個(gè)像素來(lái)創(chuàng)建“山頂”(你肯定覺得這是個(gè)不折不扣的白癡題目)�？纯磮D片2，一個(gè)盒子變焦的放大視圖，邊角上被刪去了好幾像素以形成一個(gè)尖突的，有角度的區(qū)域。在100%大小觀察的時(shí)候，邊角就會(huì)顯得很圓。
圖 2
如果背景色很淺，你可以再多刪去一些像素使得圓角的效果更加明顯。像之前那樣制作一個(gè)尖突的有角度區(qū)域，然后再在每一側(cè)都多去掉一像素，我們就可以讓邊緣再圓滑一些(見圖3)。當(dāng)山頂在三層以上時(shí)，我們常常需要這附加的一像素。而且在盒子的背景顏色很淺的時(shí)候，這一個(gè)像素對(duì)盒子與整個(gè)頁(yè)面背景色的融合也是很合適的。
圖3
透明的山峰
到了這里，你可能要說：“Dan(本文作者)，這真是一個(gè)太簡(jiǎn)單的技巧了�！睕]錯(cuò)，的確簡(jiǎn)單。但是精髓并不在這，而在于當(dāng)我們需要圓角的時(shí)候，我們可以使用鉛筆工具來(lái)創(chuàng)建大小和顏色都可以改變的盒子與邊框。(而且有一些人在刮像素的時(shí)候會(huì)有莫名的快感……)
由于山頂角只利用兩種顏色，我們可以把其中一種設(shè)為透明，使得山頂?shù)念伾c網(wǎng)頁(yè)的背景顏色相同，從而創(chuàng)造出圓角的效果。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 山頂角 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 山頂角 [1]
第 2 頁(yè) 
