您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“CSS中border邊框和padding內(nèi)邊距怎么用”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中border邊框和padding內(nèi)邊距怎么用”這篇文章吧。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>測(cè)試</title>
<linkrel="stylesheet"type="text/css"href="Text08.css">
</head>
<body>
<tableborder="3">
<tr>
<td>EDG流弊</td>
</tr>
</table>
<pid="p1">RNG世界第一偽強(qiáng)隊(duì)</p>
<pid="p2">WE提前淘汰,還粉絲60E</p>
<pid="p3">EDG國(guó)電,世界希望</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:4pxsolidfuchsia;
}
/*border-radius增加邊框邊角的效果,border-image是添加邊框圖片*/
#p3{
width:100px;
height:100px;
text-align:center;
color:red;
background-color:aqua;
box-shadow:10px10px5pxcornflowerblue;
}
/*box-shadow是邊框陰影效果,第一個(gè)屬性是向右偏移多少,
第二個(gè)是向下,第三個(gè)是程度,第四個(gè)就是陰影的顏色*/
以上是“CSS中border邊框和padding內(nèi)邊距怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。