cari

Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menyatakan kotak bertitik dalam css

Bagaimana untuk menyatakan kotak bertitik dalam css

WBOY
WBOYasal
2021-11-29 18:46:574780semak imbas

Kaedah perwakilan bingkai bertitik dalam CSS: 1. "Elemen {border-style:dashed;}", nilai "dashed" bermaksud menetapkan sempadan kepada gaya bertitik 1. "Element {border-style :dotted" ;}", nilai "dotted" bermaksud menetapkan jidar kepada gaya bertitik.

Bagaimana untuk menyatakan kotak bertitik dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara menyatakan kotak bertitik dalam css

Terdapat dua cara untuk menyatakan kotak bertitik dalam css.

1. Gunakan gaya sempadan: gaya putus-putus Contoh adalah seperti berikut: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    div{
        width:100px;
        height:100px;
        background-color:red;
        border-style: dashed;
    }
        </style>
</head>
<body>
<div> </div>
</body>
</html>

Hasil keluaran:

Bagaimana untuk menyatakan kotak bertitik dalam css

2. Gunakan gaya sempadan: gaya bertitik; contohnya adalah seperti berikut: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    div{
        width:100px;
        height:100px;
        background-color:red;
        border-style: dotted;
    }
        </style>
</head>
<body>
<div> </div>
</body>
</html>

Hasil keluaran:

Bagaimana untuk menyatakan kotak bertitik dalam css

(Perkongsian video pembelajaran: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menyatakan kotak bertitik dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 border
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：Bolehkah panjang gaya garis bawah ditetapkan dalam css?Artikel seterusnya：Bolehkah panjang gaya garis bawah ditetapkan dalam css?

Artikel berkaitan

Lihat lagi