Rumah > Artikel > hujung hadapan web > css盒子边框样式介绍
css盒子边框样式介绍
- 高洛峰asal
- 2017-03-04 16:56:502403semak imbas
边框样式有全边框和单个边框样式，可对每条边设置不同的样式
如下代码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中文网！
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何用CSS3做星体Artikel seterusnya：css文本样式及控制文本的大小写方法