8.17 純css畫一個著重號表徵圖

標籤：cts   image   status   學習   代碼   顏色   asc   www   cursor   

今天看到一個同事寫的著重號表徵圖，我以為是圖片，仔細一看，是span標籤！哇！！學習一下哈哈

表徵圖長這樣：

CSS代碼：

.hint{display: inline-block;width: 20px;height: 20px;line-height: 20px;border: 1px solid red;border-radius: 10px;color: red;text-align: center;margin-left: 10px;cursor: default;}

頁面這樣寫：

return o.projectStatus + ‘<span class="hint" title="審核不通過">!</span>‘

這裡用到一個CSS3的新屬性---border-radius

w3school對border-radius的介紹：

定義和用法border-radius 屬性是一個簡寫屬性，用於設定四個 border-*-radius 屬性。提示：該屬性允許您為元素添加圓角邊框！預設值：0繼承性：no版本：CSS3JavaScript 文法：object.style.borderRadius="5px"

還很貼心的提示了可以為元素添加圓角邊框！

以下源於 參閱資料：http://www.cnblogs.com/wansimin/articles/4365040.html

原來CSS3之前實現圓角的效果只能通過圖片或者設定margin屬性實現，過程比較繁瑣，CSS3的到來簡化了圓角的實現方式！！！

畫實心圓的方法就是元素的高度和寬度一致，然後將四個角設定為高度或寬度的1/2。

這裡是先在span裡寫一個驚嘆號，顏色為紅色，設定span的高寬為20px，border為1px  solid  red，border-radius為高寬一半，即10px~完成！！棒棒噠！！！

      

CSS3對於邊框給出了三個屬性：

 

• border-radius，設定圓角邊框
• box-shadow，向方框添加陰影
• border-image，用圖片建立邊框

最近git瞭解差不多了，開始學習CSS3！加油嘍！！

 

　  

 

8.17 純css畫一個著重號表徵圖