masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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中文网(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中文网(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中文网(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中文网(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中文网(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中文网(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简写属性，用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。




Meneruskan pembelajaran
||
<!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>两个不同的边界样式。</p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492876 permainan