|
簡單的CSS圓角
圓角可能會給網(wǎng)站頁面帶來一些麻煩，比如，它可能需要為每個角使用一張圖片，但是這可能會引起某些表現(xiàn)上的問題（比如不同的瀏覽器可能表現(xiàn)上會有細(xì)微的差別）。在WebKit中有效的CSS3的”border-radius”屬性讓實(shí)現(xiàn)圓角變得簡單，它只需要幾行簡單的CSS代碼。如下所示：
#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
text-align:center; background:#eee; }
<div id="boxes">
<div style="-webkit-border-radius:15px;">
All sides
</div>
<div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;">
Opposite corners
</div>
<div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;">
Top
</div>
<div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;">
Side
</div>
</div>
這段樣式代碼定義所有的在boxes里面的DIV都要有一個比較大的border（邊框）、邊距、寬度、背景等。然后每個div標(biāo)簽的border-radius被設(shè)置為不同的方式。你可以在下面看到運(yùn)行結(jié)果：
截圖6. 純CSS圓角
第一個div中border-radius被設(shè)置為所有的角。然后第二個div，只是左下角和右上角。第三個div就像一個tab，只是上面的角被設(shè)置為圓角。最后一個div被設(shè)置為單邊的圓角，只有右邊的兩個角是圓角。
全新的表單控制
WebKit同樣提供一些新的控制來使用于你的頁面。下面的例子演示一個水平滑動條、一些新樣式的按鈕以及一個很像Safari工具欄的搜索框
<input type="range" style="-webkit-appearance:slider-horizontal;"><br/><br/>
<button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button><br/><br/>
<button style="-webkit-appearance:push-button;width:200px;">aqua button</button><br/><br/>
<input type="text" style="-webkit-appearance:searchfield;" value="kitten"></input><br/>
你可以通過下面的截圖看到演示效果。
截圖7. WebKit可用的一些新的按鈕
新的滑動控制條尤其好用，因?yàn)檫@個滑動控制條的確不太好用JavaScript來寫，并且還要在每個瀏覽器中都兼容。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 用于WebKit的CSS訣竅 [2] 下一頁 用于WebKit的CSS訣竅 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 用于WebKit的CSS訣竅 [3]
