Rumah >hujung hadapan web >tutorial css >Ketahui perbezaan antara sempadan dan garis besar CSS
Ketahui perbezaan antara sempadan dan garis besar CSS
- WBOYke hadapan
- 2023-09-15 08:25:01695semak 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
<!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>OutputIni memberikan output berikut-
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!