相容所有瀏覽器的圓角出效果
本章節分享一段圓角程式碼例項,它實現了相容所有瀏覽器的功能。
不過這種實現方式不夠靈活,圓角的弧度是無法控制的。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body { padding: 0; } .a { margin: 200px auto; } .b { margin: 0 4px; height: 1px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; background-color: white; } .c { margin: 0 3px; height: 1px; border-left: 1px solid black; border-right: 1px solid black; background-color: white; } .d { margin: 0 2px; height: 1px; border-left: 1px solid black; border-right: 1px solid black; background-color: white; } .e { margin: 0 1px; height: 1px; border-left: 1px solid black; border-right: 1px solid black; background-color: white; } .f { margin: 0; height: 40px; border-left: 1px solid black; border-right: 1px solid black; background-color: white; } </style> </head> <body> <div class="a"> <div class="b"></div> <div class="c"></div> <div class="d"></div> <div class="e"></div> <div class="f" style="text-align: center;line-height: 40px;">本站url地址是softwhy.com</div> <div class="e"></div> <div class="d"></div> <div class="c"></div> <div class="b"></div> </div> </body> </html>
css3實現圓角可以參閱CSS3 border-radius一章節。
相關文章
- 相容所有瀏覽器的placeholder效果瀏覽器
- 相容所有瀏覽器的模糊效果程式碼例項瀏覽器
- 相容所有瀏覽器的圖片上傳本地預覽效果瀏覽器
- 相容所有瀏覽器的點選複製黏貼效果瀏覽器
- 相容所有瀏覽器的display:inline-block效果瀏覽器inlineBloC
- 相容所有瀏覽器的密碼框輸入提示效果瀏覽器密碼
- forEach()相容所有瀏覽器瀏覽器
- 相容所有瀏覽器的點選複製文字內容效果瀏覽器
- 相容所有瀏覽器js設定元素透明度效果瀏覽器JS
- 相容所有瀏覽器的getElementsByClassName()函式瀏覽器函式
- 相容所有瀏覽器的陣列indexOf()方法瀏覽器陣列Index
- 相容所有瀏覽器的DOMContentLoaded事件瀏覽器事件
- 相容所有瀏覽器array物件indexOf()方法瀏覽器物件Index
- 相容所有瀏覽器的對聯廣告程式碼瀏覽器
- 相容所有瀏覽器的阻止事件冒泡程式碼瀏覽器事件
- 相容所有瀏覽器的阻止事件冒泡封裝瀏覽器事件封裝
- 相容所有瀏覽器的progress程式碼例項瀏覽器
- 解決iPhone 瀏覽器上的圓角問題iPhone瀏覽器
- 原生js如何建立相容所有瀏覽器的xmlhttp物件JS瀏覽器XMLHTTP物件
- js相容所有瀏覽器的事件繫結程式碼JS瀏覽器事件
- 相容所有瀏覽器的阻止事件冒泡js程式碼瀏覽器事件JS
- js相容所有瀏覽器的pageX和pageY屬性JS瀏覽器
- 相容所有瀏覽器的獲取事件源物件程式碼瀏覽器事件物件
- 相容所有瀏覽器的js滑鼠中鍵滾動事件瀏覽器JS事件
- 相容所有瀏覽器的nextSibling瀏覽器
- 滾動滑鼠縮放圖片相容所有瀏覽器瀏覽器
- IE瀏覽器相容瀏覽器
- parseInt()瀏覽器相容瀏覽器
- 9:瀏覽器相容瀏覽器
- css文字兩端對齊效果相容各瀏覽器CSS瀏覽器
- CSS實現的相容所有瀏覽器的背景漸變程式碼CSS瀏覽器
- 相容所有瀏覽器的禁止選中div文字程式碼例項瀏覽器
- 相容IE8和IE7瀏覽器的圓形圖案瀏覽器
- 關於瀏覽器相容瀏覽器
- 瀏覽器相容性瀏覽器
- js實現的相容所有瀏覽器的滑鼠中鍵滾動事件JS瀏覽器事件
- CSShack瀏覽器相容一覽表CSS瀏覽器
- 相容所有瀏覽器長寬自適應元素垂直水平居中瀏覽器