css盒子邊框樣式介紹
- 高洛峰原創
- 2017-03-04 16:56:502380瀏覽
邊框樣式有全邊框和單一邊框樣式，可為每個邊設定不同的樣式
如下程式碼P1為全邊框樣式，P2設定為單一邊框的不同樣式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css边框样式</title>
<style>
#p1{
background: yellowgreen;
border:4px dotted rebeccapurple;
border-radius: 20px;
width:200px;
text-align:center;
padding:5px;
color:#fff;
font-weight:bold;
}
#p2{
background: rebeccapurple;
border:4px dashed skyblue;
border-radius: 5px;
width:200px;
text-align:center;
padding:5px;
color:#fff;
font-weight:bold;
border-bottom-color: palegreen;
border-top-style: dotted;
}
</style>
</head>
<body>
<p id="p1">这是一段测试文字</p>
<p id="p2">这是一段测试文字</p>
</body>
</html>更多css盒子邊框樣式相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何用CSS3做星體下一篇：如何用CSS3做星體