简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

css盒子边框样式介绍

高洛峰
Lepaskan： 2017-03-04 16:56:50
asal
2343 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
Isu terkini
WordPress 6.0 (add_editor_style) tidak memuatkan style.css dalam editor Gutenberg Saya mengikuti kursus UdemyWordPress untuk mencipta tema blok WordPress tersuai. Saya berj...
daripada 2023-11-12 20:37:50
0
2
261
CSS mendahului sifar untuk perpuluhan yang tidak berfungsi dengan nombor yang besar Baru-baru ini saya menghadapi masalah di mana saya mencipta senarai tersusun dengan lebih ...
daripada 2023-11-07 10:35:53
0
1
236
Ralat Sass: Fail telah dimuatkan: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; Saya menggunakan rangka kerja quasar dan semasa menyusun projek saya, saya mengalami ralat...
daripada 2023-11-06 21:38:55
0
1
219
Bagaimana untuk membenamkan video latar belakang dalam HTML/CSS? Hai semua, baru-baru ini saya menghadapi masalah. Saya cuba untuk menetapkan latar belakan...
daripada 2023-11-06 13:59:13
0
1
240
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！