css3半透明邊框程式碼
分享一段程式碼例項,它實現了半透明邊框效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { border: 10px solid rgba(160,100,150,0.4); background:#ccc; background-clip: padding-box; width:250px; height:150px; position: absolute; top: 200px; left: 200px; } </style> </head> <body> <div></div> </body> </html>
上面的程式碼實現了我們的要求,非常的簡單,就是通過rgba方式設定邊框的透明度。
相關閱讀:
(1).rgba可以參閱CSS3 RGBA一章節。
(2).background-clip可以參閱background-clip一章節。
相關文章
- css半透明邊框程式碼例項CSS
- css實現半透明邊框程式碼例項CSS
- CSS 3半透明邊框CSS
- CSS3製作半透明邊框記得以前Facebook有段時間使用了非常多的半透明邊框(Facebox)CSSS3
- 半透明邊框與background-clip
- css3螞蟻線邊框程式碼例項CSSS3
- 小視訊原始碼,CSS 實現半透明邊框效果原始碼CSS
- css3實現的多重邊框程式碼例項CSSS3
- css3 動態條紋邊框程式碼例項CSSS3
- css3鋸齒形邊框效果程式碼例項CSSS3
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- CSS3多層邊框效果CSSS3
- CSS3邊框與圓角CSSS3
- CSS虛線邊框效果程式碼CSS
- 文字嵌入邊框程式碼例項
- css多重邊框程式碼例項CSS
- CSS3 border-radius帶邊框CSSS3
- CSS3邊框動態環繞效果CSSS3
- 13 - CSS3 - 邊框圓角 - 鐘錶CSSS3
- CSS3環繞動態邊框效果CSSS3
- CSS3實現0.5px邊框CSSS3
- CSS設定div邊框演示程式碼CSS
- css內邊框效果程式碼例項CSS
- css邊框陰影程式碼例項CSS
- css條紋邊框程式碼例項CSS
- div虛線邊框程式碼例項
- css3實現0.5px邊框效果CSSS3
- CSS3實現多樣的邊框效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- css3的半透明效果CSSS3
- CSS3郵票鋸齒邊框效果詳解CSSS3
- ul和li 帶有邊框的方格程式碼
- outline兩層邊框程式碼例項
- CSS設定邊框為透明程式碼例項CSS
- css3邊框顏色漸變且四角有內凹圓形程式碼例項CSSS3
- 小程式中button的邊框無法去除 button邊框如何去除