利用純CSS3實現標簽效果

做網頁的時候經常要實現一些類似于標簽的標識，這時很多人會使用圖片去實現，當然這是一種做法，還有另外一種做法就是利用CSS3的屬性來實現該效果！下面看看效果圖：

要實現該效果原理就是右邊定位一個三角形，然后下面的夾角也是定位一個小三角形就可以實現如圖所描述的效果！

下面來看看簡要的代碼：

html:

主要CSS：

主要通過css偽類來添加2個三角形的效果，實現標簽效果！

文章介紹了html標簽里的input標簽和label標簽的美化效果！效果圖如下：

用在復選框中選擇，個性化了復選框的默認樣式，增強用戶體驗！

實現方法也非常簡單

下面看看代碼

html:

css:

篇文章繼續為大家介紹html常用修飾標簽介紹。我們今天主要說下樣式標簽、內容修飾標簽等的語法以及使用技巧。

1）樣式標簽

使用語法：文章內容

標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。如果現在我們想要修改一篇文章中的幾個字字體效果，為它設置和其它文字不同的樣式，所以這樣情況下就可以用到標簽了。比如我們設置字體顏色為藍色，并設置字號大小為30px，代碼如下圖所示：

代碼在瀏覽器中顯示的效果就如下圖所示：我們可以清楚的看到被span標簽包裹的文字內容已經變成了藍色，字體大小也變成了30px；

內容修飾標簽有很多，這里我們簡單的來列舉一下標簽的名稱以及標簽的作用。

文字斜體標簽： 、

文字加粗標簽： 、

文字下標標簽：

文字上標標簽：

文字下劃線標簽： <ins></ins>

文字刪除線標簽： <del></del>

具體的代碼如下所示：

代碼在瀏覽器中顯示的效果就如下圖所示：每個被標簽包裹的內容都賦予了其獨立的效果。

好了以上就是我們所說的修飾標簽，每個標簽都有單獨的意義，在以后練習的時候可以自己多實踐一下，只有自己親自動手去寫了才能明白其中的含義以及效果。

附贈一句經典語錄：每一天，都要盡心盡力的工作，每一件小事情，都力爭高效的完成，不是為了看到老板的笑臉，而是為了自身不斷的進步。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

*請認真填寫需求信息，我們會在24小時內與您取得聯系。