溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS中border和padding的使用示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
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世界第一偽強隊</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控制著內容距離邊距的距離，如果只是padding后面接一個值，就是上下左右都是這個值
這是分開對上下左右進行設置*/
#p1{
border-top-style: groove;
border-top-width: 5px;
border-top-color: deepskyblue;
}
/*控制著主體內容外面一點的邊框，同上面一樣可以分別控制四個部分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是邊框陰影效果,第一個屬性是向右偏移多少，
第二個是向下，第三個是程度，第四個就是陰影的顏色*/效果：
感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS中border和padding的使用示例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
