css border對raid按鈕的影響

 

首先我們來看一下上圖中兩個選項按鈕的區別，B樣式是不是很難看？
我們來看一下源碼是不是有問題

A處代碼：

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton" /><label for="radiobutton">正常樣式</label>
B處代碼：

<input type="radio" name="radiobutton2" value="radiobutton2" id="radiobutton2"><label for="radiobutton2">變化樣式</label>
我們可以看出源碼上並沒發現什麼問題，出現這樣的問題，最大的懷疑對象就是CSS，因為CSS最容易改變網頁中各元素的“外表”，所以就從CSS開始入手調查。

顯示margin、padding、lineline-height等入手，最後終於排查到了border屬性。果不其然，就是一段不起眼的border:0代碼讓它變得又瘦又小。
只要去掉給單選框定義為border:0的屬性，它就變回了預設樣式。
在製作頁面時，細節真的很重要，同學們也要注意