溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS+DIV實現圓角表格的方法有哪些”，在日常操作中，相信很多人在CSS+DIV實現圓角表格的方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS+DIV實現圓角表格的方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS+DIV實現圓角表格的三種方法
很多網頁上都有圓角表格，讓人看起來非常舒服。今天向大家講解CSS+DIV實現圓角表格的三種方法。
方法一：網上流傳最多的DIV圓角方式，完整代碼如下；
<html> <head> <title>CSS實現DIV圓角的三種方法</title> <metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312"> <styletypestyletype="text/css"> <!-- body{color:#fff;} div.RoundedCorner{background:black} b.R_top,b.R_bottom{display:block;background:#FFFFFF} b.R_topb,b.R_bottomb{display:block;height:1px;overflow:hidden;background:black} b.R_1{margin:05px} b.R_2{margin:03px} b.R_3{margin:02px} b.R_topb.R_4,b.R_bottomb.R_4{margin:01px;height:2px} --> </style> </head> <body> <divclassdivclass="RoundedCorner"> <bclassbclass="R_top"> <bclassbclass="R_1"></b> <bclassbclass="R_2"></b> <bclassbclass="R_3"></b> <bclassbclass="R_4"></b> </b> <p>圓角DIV內容</p> <bclassbclass="R_bottom"> <bclassbclass="R_4"></b> <bclassbclass="R_3"></b> <bclassbclass="R_2"></b> <bclassbclass="R_1"></b> </b> </div> </body> </html>總結：此方法靈活性較好，但調用麻煩，每次調用，DIV前后都需要加上如此多的代碼，而且圓角的半徑不好調。
方法二：使用background-image方法，使DIV出現圓角背景圖片；這個方法需要事先在PS或FW畫好一張圓角的背景圖片；
示例：
div{background:url(圖片url)no-repeat;}總結：此方法適合用于特別位置，調用方法最簡單，但靈活性不夠好。要改變表格大小，必須重新做圓角背景圖片。
方法三：
同樣background-image方法，使DIV出現圓角底景圖片；這個方法需要事先在PS或FW畫好一張圓角的背景圖片；但這個方法需要分成三個DIV實現，***個DIV放上圓角背景的最左邊部分，中間的DIV使用1像素背景填充，第三個DIV放上圓角背景的最右邊部分；
示例：
div_l{float:left;background:url(圓角背景的最左邊部分圖片url)no-repeat;}/*自行設置高度，寬度*/ div_m{float:left;background:url(1像素背景填充圖片url)repeat-x;}/*自行設置高度，寬度，背景圖片橫向重復*/ div_r{float:left;background:url(圓角背景的最右邊部分圖片url)no-repeat;}/*自行設置高度，寬度*/ <divclassdivclass="div_l"></div> <divclassdivclass="div_m">DIV內容DIV內容</div> <divclassdivclass="div_r"></div>總結：此方法步驟較多，但靈活性較好，適用于任意寬度的圓角DIV。
到此，關于“CSS+DIV實現圓角表格的方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
