Modul antara muka pengguna CSS3 menyediakan lebih banyak kesan dan pilihan untuk prestasi UI halaman.
Menambah beberapa ciri antara muka pengguna baharu untuk melaraskan saiz elemen, saiz kotak dan sempadan luar.
saiz semula atribut
Takrifan atribut dan arahan penggunaan
saiz semula atribut menentukan satu Sama ada elemen itu diubah saiz oleh pengguna.
Nota: Atribut ubah saiz sesuai untuk mengira sama ada nilai limpahan unsur lain adalah "kelihatan".
Nilai lalai: tiada
Diwarisi: tidak
Versi: CSS3
Sintaks JavaScript: object.style.resize="both"
Sokongan penyemak imbas: Firefox 4 + , Chrome dan Safari menyokong atribut ubah saiz.
Sintaks
saiz semula: tiada|kedua-duanya|mendatar|menegak:
tiada: Tidak membenarkan pengguna mengubah saiz elemen. Jangan benarkan pengguna mengubah saiz elemen.
kedua-duanya: Pengguna boleh melaraskan lebar dan ketinggian elemen.
mendatar: Pengguna boleh melaraskan lebar elemen
menegak: Pengguna boleh melaraskan ketinggian elemen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 600px;
height: 300px;
border: 1px solid #000;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p>请注意观察方框右下角</p>
<div class="box"></div>
</body>
</html>
atribut saiz kotak
saiz kotak mempunyai dua nilai: kotak kandungan dan kotak sempadan.
box-sizing: content-box;
Apabila box-sizing:content-box; tidak termasuk sempadan dan padding.
saiz kotak: kotak sempadan;
Apabila saiz kotak: kotak sempadan ditetapkan, penyemak imbas mentafsir model kotak sama seperti versi pra-IE6 apabila ia mentakrifkan lebar dan tinggi , sempadan dan padding disertakan dalam lebar dan tinggi. Lebar dan tinggi kandungan boleh diperoleh dengan menentukan lebar dan tinggi tolak lebar padding dan sempadan dalam arah yang sepadan. Lebar dan tinggi kandungan mesti dijamin tidak negatif Jika perlu, saiz kotak sempadan elemen akan ditingkatkan secara automatik supaya lebar atau ketinggian kandungan sekurang-kurangnya 0.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
</head>
<body>
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>
</body>
</html>atribut outline-offset
Sifat outline-offset mengimbangi garis besar dan menariknya melepasi tepi sempadan.
Terdapat dua perbezaan antara garis besar dan sempadan:
1 Garis besar tidak mengambil ruang
2 >
Sintaks:garis luar:<panjang> |
<panjang>: Mentakrifkan nilai bekas jarak kontur.
warisi: Warisan lalai.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 100px;
width: 100px;
margin: 50px auto;
outline: 10px solid rgba(255,255,0,9);
background: black;
outline-offset: 10px;
border:5px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>