Sempadan CSS


CSS Sempadan

Sempadan CSS boleh menjadi satu atau lebih baris yang mengelilingi kandungan dan pelapis elemen Untuk garisan ini, anda boleh menyesuaikannya dengan gaya, lebar dan warna . Menggunakan sifat sempadan CSS, kami boleh mencipta kesan yang lebih baik daripada HTML.

Sifat Sempadan CSS

Sifat sempadan CSS membolehkan anda menentukan gaya dan warna sempadan unsur.


Sempadan pada keempat-empat sisi
Sempadan bawah merah

Sempadan bulat

Sempadan kiri mempunyai lebar dan warna biru

Gaya Sempadan

Harta gaya sempadan menentukan jenis sempadan yang hendak dipaparkan.

gaya sempadan atribut digunakan untuk mentakrifkan gaya sempadan

nilai gaya sempadan:

tiada: Lalai tidak sempadan

bertitik: bertitik: Tentukan bingkai bertitik

berputus-putus: Tentukan bingkai bertitik

pepejal: Tentukan sempadan pepejal

ganda: Tentukan dua sempadan . Lebar dua sempadan dan nilai lebar sempadan adalah sama

alur: Tentukan sempadan alur 3D. Kesannya bergantung pada nilai warna sempadan

rabung: Mentakrifkan sempadan rabung 3D. Kesannya bergantung pada nilai warna sempadan

inset: Mentakrifkan sempadan terbenam 3D. Kesannya bergantung pada nilai warna jidar

permulaan: Mentakrifkan jidar 3D yang menonjol. Kesannya bergantung pada nilai warna sempadan

Cuba ini: Tetapkan gaya sempadan

Lebar sempadan

Anda boleh melepasi atribut lebar sempadan sebagai sempadan menentukan lebar.

Terdapat dua cara untuk menentukan lebar jidar: anda boleh menentukan nilai panjang, seperti 2px atau 0.1em atau menggunakan salah satu daripada 3 kata kunci, iaitu nipis, sederhana (lalai) dan tebal.

Nota: CSS tidak mentakrifkan lebar khusus 3 kata kunci, jadi seorang ejen pengguna boleh menetapkan nipis, sederhana dan tebal kepada 5px, 3px dan 2px masing-masing, manakala yang lain ejen pengguna Proksi ditetapkan kepada 3px, 2px dan 1px masing-masing.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Warna sempadan

Sempadan- atribut warna digunakan Tetapkan warna sempadan. Warna yang boleh ditetapkan:

  • nama - Tentukan nama warna, seperti "merah"

  • RGB - Tentukan nilai RGB , seperti "rgb( 255,0,0)"

  • Hex - Tentukan nilai perenambelasan, seperti "#ff0000"

Anda juga boleh menetapkan sempadan Warnanya "telus".

Nota: warna sempadan tidak berfungsi apabila digunakan secara bersendirian Anda mesti menggunakan gaya sempadan untuk menetapkan gaya sempadan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one
{
	border-style:solid;
	border-color:red;
}
p.two
{
	border-style:solid;
	border-color:#98bf21;
} 
</style>
</head>

<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Sempadan - Tetapkan setiap bahagian secara berasingan

Dalam CSS, anda boleh menentukan sempadan berbeza pada sisi berbeza:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh di atas juga boleh menetapkan satu atribut:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	border-style:dotted solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

atribut gaya sempadan boleh mempunyai 1-4 nilai:

  • gaya sempadan: bertitik pepejal dua putus-putus;

    Sempadan atas bertitik

    • Sempadan kanan padat

    • Sempadan bawah berganda

    • Sempadan kiri putus-putus

      • gaya sempadan: bertitik dua padat;


  • Sempadan atas bertitik

    • Sempadan kiri dan kanan padat

    • Bahagian bawah sempadan adalah dua kali ganda

      • gaya sempadan: pepejal bertitik;


  • Sempadan Sempadan atas dan bawah bertitik

    • Sempadan kanan dan kiri padat

      • gaya sempadan: bertitik;

  • Sempadan empat segi bertitik

    • Contoh di atas menggunakan gaya sempadan. Walau bagaimanapun, ia juga boleh digunakan dengan lebar sempadan dan warna sempadan.
Sempadan - atribut singkatan

Contoh di atas menggunakan banyak atribut untuk menetapkan sempadan.

T Anda juga boleh menetapkan sempadan dalam harta.

Anda boleh menetapkannya dalam atribut "sempadan":

lebar sempadan

  • gaya sempadan (diperlukan)

  • warna sempadan

  • Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	border:5px solid red;
}
</style>
</head>

<body>
<p>段落中的一些文本。</p>
</body>
</html>

Jalankan instance »
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Lagi contoh

Instance: Semua sempadan sifat berada dalam Dalam kenyataan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p 
{
	border-style:solid;
	border-top:thick double #ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>

Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Contoh ini menunjukkan Gunakan atribut trengkas untuk menetapkan keempat-empat sifat sempadan dalam pengisytiharan yang sama.

Contoh: Tetapkan gaya sempadan bawah

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>

<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>

Jalankan instance»
Klik "Run Instance" butang untuk melihat contoh dalam talian
Contoh ini menunjukkan cara menetapkan gaya sempadan bawah.

Contoh: Tetapkan lebar sempadan kiri

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p 
{
	border-style:solid;
	border-left-width:15px;
}
</style>
</head>

<body>
<p><b>注意:</b>"border-left-width" 单独使用没有效果.要先使用 "border-style" 属性设置borders.</p>
</body>
</html>

Jalankan instance»
Klik butang "Run instance" untuk melihat contoh dalam talian
Contoh ini menunjukkan cara untuk menetapkan lebar sempadan kiri.

Contoh: Tetapkan warna empat jidar

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one
{
	border-style:solid;
	border-color:#0000ff;
}
p.two
{
	border-style:solid;
	border-color:#ff0000 #0000ff;
}
p.three
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>

<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>

Jalankan instance»
Klik "Run Instance" butang untuk melihat dalam talian Contoh

Contoh ini menunjukkan cara menetapkan warna empat jidar. Satu hingga empat warna boleh ditetapkan.

Instance: Tetapkan warna jidar kanan 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p 
{
	border-style:solid;
	border-right-color:#ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

Jalankan instance»

Klik butang "Run instance" untuk melihat contoh dalam talian

Harta sempadan CSS

HartanahPenerangan
sempadan Atribut singkatan, digunakan untuk menetapkan atribut untuk empat sisi dalam satu pernyataan.
gaya sempadan digunakan untuk menetapkan gaya semua sempadan elemen atau menetapkan gaya sempadan untuk setiap sisi secara individu.
lebar sempadan Atribut singkatan, digunakan untuk menetapkan lebar semua sempadan elemen atau menetapkan lebar setiap sempadan secara berasingan .
warna sempadan Atribut ringkas, tetapkan warna bahagian yang boleh dilihat bagi semua jidar elemen atau tetapkan warna untuk setiap daripada 4 sisi.
border-bottom atribut trengkas, digunakan untuk menetapkan semua atribut sempadan bawah ke dalam satu pernyataan.
warna-bawah-sempadan Tetapkan warna sempadan bawah elemen.
gaya-bawah-sempadanTetapkan gaya sempadan bawah elemen.
lebar-bawah-sempadanMenetapkan lebar sempadan bawah elemen.
border-left Atribut singkatan, digunakan untuk menetapkan semua atribut sempadan kiri ke dalam satu pernyataan.
warna-sempadan-kiri Menetapkan warna sempadan kiri elemen.
gaya-kiri sempadanTetapkan gaya sempadan kiri elemen.
lebar-kiri sempadanMenetapkan lebar sempadan kiri elemen.
border-right atribut trengkas, digunakan untuk menetapkan semua atribut sempadan kanan ke dalam satu pernyataan.
warna sempadan-kanan Menetapkan warna jidar kanan elemen.
gaya sempadan-kananTetapkan gaya sempadan kanan elemen.
sempadan-kanan-lebarMenetapkan lebar sempadan kanan elemen.
border-top atribut trengkas, digunakan untuk menetapkan semua atribut sempadan atas ke dalam satu pernyataan.
warna atas sempadanMenetapkan warna sempadan atas elemen.
gaya atas sempadanTetapkan gaya sempadan atas elemen.
lebar atas sempadanMenetapkan lebar sempadan atas elemen.
←
→