css盒子边框样式介绍
程序员文章站
2022-03-20 23:15:28
...
边框样式有全边框和单个边框样式，可对每条边设置不同的样式
如下代码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中文网！