Rumah > Artikel > hujung hadapan web > Ketahui perbezaan antara sempadan dan garis besar CSS

Ketahui perbezaan antara sempadan dan garis besar CSS

WBOYke hadapan: 2023-09-15 08:25:01667semak imbas

Sifat sempadan CSS digunakan untuk menentukan sifat sempadan unsur. Ia adalah singkatan untuk lebar jidar, gaya jidar dan warna jidar. Anda boleh menggayakan sempadan pada setiap sisi dan menentukan jejari sempadan.

Garis besar CSS, sebaliknya, tidak mengambil ruang dan, jika ditetapkan, muncul di sekeliling sempadan. Ia menyokong offset. Tambahan pula, kami tidak boleh menentukan sama ada tepi individu harus mempunyai garis besar.

Secara lalai, sempadan dan garis besar tidak dipaparkan.

Sintaks

Sintaks untuk sifat sempadan dan garis besar CSS adalah seperti berikut -

Selector {
   border: /*value*/
   outline: /*value*/
}

Contoh

Contoh berikut menggambarkan sifat sempadan dan garis besar CSS -

Demo langsung

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 15px;
   padding: 20px;
   width: 35%;
   border: thin solid green;
   outline-width: 5px;
   outline-style: ridge;
   outline-color: fuchsia;
   border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html>

Ini memberikan output berikut

Output berikut

Ketahui perbezaan antara sempadan dan garis besar CSS

Contoh

Demonstrasi Langsung

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 40px;
   padding: 12px;
   width: 30%;
   border: thick dashed green;
   outline: 5px inset;
   outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html>

Output

Ini memberikan output berikut-

Ketahui perbezaan antara sempadan dan garis besar CSS

Atas ialah kandungan terperinci Ketahui perbezaan antara sempadan dan garis besar CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk membuat bar carian Google (seperti kotak input) diserlahkan pada hover menggunakan CSS?Artikel seterusnya：Bagaimana untuk membuat bar carian Google (seperti kotak input) diserlahkan pada hover menggunakan CSS?

Artikel berkaitan

Lihat lagi