css盒子边框样式介绍

高洛峰

Lepaskan： 2017-03-04 16:56:50

asal

2401 orang telah melayarinya

边框样式有全边框和单个边框样式，可对每条边设置不同的样式

如下代码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>

Salin selepas log masuk

更多css盒子边框样式相关文章请关注PHP中文网！

Label berkaitan：

css

sumber：php.cn

Artikel sebelumnya：如何用CSS3做星体 Artikel seterusnya：css文本样式及控制文本的大小写方法

Kenyataan Laman Web ini

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 terbaru oleh pengarang