亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Sempadan CSS

Sempadan CSS

Harta Sempadan CSS

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

Gaya Sempadan

Harta gaya sempadan menentukan jenis sempadan yang hendak dipaparkan.

Atribut gaya sempadan digunakan untuk mentakrifkan gaya sempadan

nilai gaya sempadan:

  • tiada: Tiada sempadan secara lalai

  • bertitik: bertitik: Tentukan kotak bertitik

  • berputus-putus: Tentukan kotak bertitik

  • pepejal : Takrifkan garis pepejal Sempadan

  • ganda: Takrifkan 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 jidar

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

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

Instance

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

<body>
<p class="none">無邊框。</p>
<p class="dotted">虛線邊框。</p>
<p class="dashed">虛線邊框。</p>
<p class="solid">實線邊框。</p>
<p class="double">雙邊框。</p>
<p class="groove"> 凹槽邊框。</p>
<p class="ridge">壟狀邊框。</p>
<p class="inset">嵌入邊框。</p>
<p class="outset">外凸邊框。</p>
<p class="hidden">隱藏邊框。</p>
</body>

</html>

Jalankan program untuk mencuba ia

Lebar sempadan

Anda boleh menentukan lebar untuk sempadan melalui sifat lebar sempadan.

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 bagi 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中文網(wǎng)(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>
</body>

</html>

Nota: Atribut "lebar sempadan" tidak mempunyai kesan jika digunakan secara bersendirian. Anda mesti menetapkan sempadan menggunakan atribut "gaya sempadan".

Jalankan program dan cuba

Warna sempadan

Harta warna sempadan digunakan untuk menetapkan warna sempadan. Warna yang boleh ditetapkan:

nama - nyatakan nama warna, seperti "merah"

RGB - nyatakan nilai RGB, seperti "rgb(255,0,0) "

Hex - Tentukan nilai perenambelasan, seperti "#ff0000"

Anda juga boleh menetapkan warna jidar kepada "telus".

Nota: warna sempadan tidak berfungsi apabila digunakan secara bersendirian gaya sempadan mesti digunakan untuk menetapkan gaya sempadan terlebih dahulu.

Instance

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(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">山河拱手，為君一笑 。</p>
<p class="two">如是顛簸生世亦無悔。</p>
</body>
</html>

Jalankan program dan cuba

Sempadan - set setiap satu Sisi

Dalam CSS, anda boleh menentukan sempadan yang berbeza untuk sisi yang berbeza:

Contoh

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(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>兩個不同的邊界樣式。</p>
</body>
</html>

Jalankan atur cara dan cuba

Atribut gaya sempadan boleh mempunyai 1-4 nilai:

gaya sempadan: pepejal bertitik dua putus putus;

< .

  • Sempadan kiri putus

gaya sempadan: bertitik dua pepejal;

  • Sempadan atas bertitik

  • Sempadan kiri dan kanan padat

  • Sempadan bawah berganda

gaya sempadan: padu bertitik;

  • Atas dan sempadan bawah Ia bertitik

  • Sempadan kanan dan kiri padat

  • gaya sempadan:bertitik;

  • Sempadan pada keempat-empat sisi bertitik

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

Sempadan - atribut trengkas

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中文網(wǎng)(php.cn)</title>
<style>
p
{
	border:5px solid red;
}
</style>
</head>

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

Jalankan program dan cuba

Lagi contoh

Tetapkan warna empat sempadan

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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>
</body>
</html>

Jalankan program untuk mencubanya

Harta sempadan CSS

屬性描述
border簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明。
border-style用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。
border-width簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度。
border-color簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設(shè)置顏色。
border-bottom簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個聲明中。
border-bottom-color設(shè)置元素的下邊框的顏色。
border-bottom-style設(shè)置元素的下邊框的樣式。
border-bottom-width設(shè)置元素的下邊框的寬度。
border-left簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中。
border-left-color設(shè)置元素的左邊框的顏色。
border-left-style設(shè)置元素的左邊框的樣式。
border-left-width設(shè)置元素的左邊框的寬度。
border-right簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個聲明中。
border-right-color設(shè)置元素的右邊框的顏色。
border-right-style設(shè)置元素的右邊框的樣式。
border-right-width設(shè)置元素的右邊框的寬度。
border-top簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個聲明中。
border-top-color設(shè)置元素的上邊框的顏色。
border-top-style設(shè)置元素的上邊框的樣式。
border-top-width設(shè)置元素的上邊框的寬度。




Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>兩個不同的邊界樣式。</p> </body> </html>