CSS 數字外框效果

效果
CSS 數字外框效果
代碼
CSS 代碼：

 

  
li 
  
{ 
  
    float:left; 
  
    overflow:hidden; 
  
    margin-left:3px; 
  
    padding:3px 5px 3px 5px; 
  
    border:1px solid #FF0000; 
  
    background-color:#000000; 
  
    color:#FFFFFF; 
  
    text-align:center; 
  
    line-height:100%; 
  
    font-size:12px; 
  
    font-weight:normal; 
  
    cursor:pointer; 
  
} 
  
.active 
  
{ 
  
    background-color:#CC0000; 
  
    color:#FFFFFF; 
  
    font-weight:bold; 
  
} 
 

HTML 程式碼：

 

  
<ul> 
  
  <li>1</li> 
  
  <li>2</li> 
  
  <li>3</li> 
  
  <li class="active">4</li> 
  
  <li>5</li> 
  
</ul>