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	设置元素的上边框的宽度。

bahagian seterusnya

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh