使用css/tevt-stroke屬性製作文字描邊
使用css/tevt-stroke屬性製作文字描邊
如果您是本站會員;我們將為您提供技術支持!!!
很多人不知道如何利用css text-stroke屬性給頁面的文字進行描邊,其實利用textshadow屬性給文字描邊也是一件很簡單的事情,那麼如何使用css text-stroke屬性來製作文字描邊?下面我們來總結一下textshadow屬性。
一:textshadow屬性:
很多人在css中使用text-stroke進行對文字的描邊,其實給一行文字進行描邊,實際上就是給一行文字加邊框。
二:text-stroke語法的使用:
text-stroke:寬度值 顏色值
解釋:
其實text-stroke是一個符合的語法,是有寬度值和顏色值兩個子屬性組成。
1.text-stroke-width屬性解釋:設置邊框的寬度,一般我們可以長度來表示
2.text-stroke-color屬性解釋:一般來設置邊框的顏色
三:text-stroke屬性的用法舉例:
1 2 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 text-stroke屬性</title> <style type="text/css"> div { font-size:30px; font-weight:bold; } #div2 { text-stroke:1px red; -webkit-text-stroke:1px red; -moz-text-stroke:1px red; -o-text-stroke:1px red; } </style> </head> <body> <div id="div1">我沒有被描邊</div> <div id="div2">我被描邊1像素的紅色的邊</div> </body> </html> |
以上代碼效果如圖:
如果你感覺在實例應用中並不是很常用,但是我們可以配合其他屬性進行使用,很多人都喜歡配合color:transparent去使用,例如:
1 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 text-stroke屬性</title> <style type="text/css"> div { font-family:Verdana; font-size:50px; font-weight:bold; color:transparent; /*設置文字顏色為透明*/ text-stroke:2px red; -webkit-text-stroke:2px #45B823; -moz-text-stroke:2px #45B823; } </style> </head> <body> <div>小閆黑客</div> </body> </html> |
由於網站搬家,部分鏈接失效,如無法下載,請聯繫站長!謝謝支持!
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途!
3. 分享目的僅供大家學習和交流,請不要用於商業用途!
4. 本站資源售價只是贊助,收取費用僅維持本站的日常運營所需!
5. 本站所有資源來源於站長上傳和網路,如有侵權請郵件聯繫站長!
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源,都不包含技術服務請大家諒解!
9. 如果你也有好源碼或者教程,可以到審核區發布,分享有金幣獎勵和額外收入!
10.如果您購買了某個產品,而我們還沒來得及更新,請聯繫站長或留言催更,謝謝理解 !
GG資源網 » 使用css/tevt-stroke屬性製作文字描邊
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途!
3. 分享目的僅供大家學習和交流,請不要用於商業用途!
4. 本站資源售價只是贊助,收取費用僅維持本站的日常運營所需!
5. 本站所有資源來源於站長上傳和網路,如有侵權請郵件聯繫站長!
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源,都不包含技術服務請大家諒解!
9. 如果你也有好源碼或者教程,可以到審核區發布,分享有金幣獎勵和額外收入!
10.如果您購買了某個產品,而我們還沒來得及更新,請聯繫站長或留言催更,謝謝理解 !
GG資源網 » 使用css/tevt-stroke屬性製作文字描邊