CSS技巧（四）radio圖片&font-face&Box Shadow

https://blog.csdn.net/zxj0904010228/article/details/82859725

 

 

 

更改radio默認樣式，使用圖片代替

 

 

input[type="radio"]{ appearance: none; -webkit-appearance: none;
      } input[type="radio"] + label:before{ content: ''; background: url(img_checkbox.png) no-repeat; background-size: contain; width: 26px; height: 26px; display: inline-block; position: relative; top: 5px;
      } input[type="radio"]:checked + label:before{ background: url(img_checkbox_checked.png) no-repeat; background-size: contain; width: 26px; height: 26px;
      }

 

 HTML

<input type="radio" name="tabletype" id="tabletype">
<label for="tabletype" style="border:1px solid red;">歷史發票</label>


<input type="radio" name="tabletype" id="tabletype1">
<label for="tabletype1">可開票據</label>

 

 

 

 

 

 Box Shadow ,x ,y 設置爲0 時 四邊有模糊效果；

 

 

引入外部字體庫

<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */
} div { font-family:myFirstFont;
} </style>