您好,登錄后才能下訂單哦!
這篇文章主要介紹了CSS中border和padding的使用示例,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試</title> <link rel="stylesheet" type="text/css" href="Text08.css"> </head> <body> <table border="3"> <tr> <td>EDG流弊</td> </tr> </table> <p id="p1">RNG世界第一偽強(qiáng)隊(duì)</p> <p id="p2">WE提前淘汰,還粉絲60E</p> <p id="p3">EDG國電,世界希望</p> </body> </html>
css代碼
td{ padding-left: 100px; padding-bottom: 100px; padding-right: 50px; padding-top: 50px; } /*padding控制著內(nèi)容距離邊距的距離,如果只是padding后面接一個(gè)值,就是上下左右都是這個(gè)值 這是分開對(duì)上下左右進(jìn)行設(shè)置*/ #p1{ border-top-style: groove; border-top-width: 5px; border-top-color: deepskyblue; } /*控制著主體內(nèi)容外面一點(diǎn)的邊框,同上面一樣可以分別控制四個(gè)部分border-top-style控制上邊框, 如果上面的屬性,就是控制上面左右的邊框效果是相同的,border-width,border-top-color同上*/ #p2{ border-radius: 15px; width: 400px; text-align: center; background-color: deepskyblue; border: 4px solid fuchsia; } /*border-radius增加邊框邊角的效果 ,border-image是添加邊框圖片*/ #p3{ width: 100px; height: 100px; text-align: center; color: red; background-color: aqua; box-shadow: 10px 10px 5px cornflowerblue; } /*box-shadow是邊框陰影效果,第一個(gè)屬性是向右偏移多少, 第二個(gè)是向下,第三個(gè)是程度,第四個(gè)就是陰影的顏色*/
效果:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“CSS中border和padding的使用示例”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。