Antara muka pengguna CSS3
Dalam CSS3, beberapa ciri antara muka pengguna baharu telah ditambah untuk melaraskan saiz elemen, saiz kotak dan sempadan luar.
Dalam bab ini, anda akan mempelajari tentang sifat antara muka pengguna berikut:
saiz semula
saiz kotak
outline-offset
Sokongan penyemak imbas
Nombor dalam jadual menunjukkan pelayar pertama yang menyokong atribut Versi nombor.
Nombor sejurus sebelum -webkit-, -ms- atau -moz- ialah nombor versi penyemak imbas pertama yang menyokong atribut awalan ini.
Saiz Semula CSS3
Dalam CSS3, atribut ubah saiz menentukan sama ada elemen perlu diubah saiz oleh pengguna.
Kod CSS adalah seperti berikut:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>Jalankan instance »
Klik butang "Run Instance" untuk melihat contoh dalam talian
CSS3 Box Sazing (Box Sazing)
The box-sizing harta membolehkan anda untuk Cara yang tepat untuk mentakrifkan kandungan khusus yang disesuaikan dengan kawasan tertentu.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Pengubahsuaian garis besar CSS3 (mengimbangi garis)
Sifat mengimbangi garis mengimbangi garis besar dan melukis garisan melepasi tepi sempadan.
Garis luar berbeza daripada sempadan dalam dua cara:
Garis tidak mengambil ruang
Garis mungkin bukan segi empat tepat
Kod CSS adalah seperti berikut:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>Run Instance»
Klik" Butang Jalankan Contoh" untuk melihat kejadian dalam talian
Ciri UI baharu
| 属性 | 说明 | CSS |
|---|---|---|
| appearance | 允许您使一个元素的外观像一个标准的用户界面元素 | 3 |
| box-sizing | 允许你以适应区域而用某种方式定义某些元素 | 3 |
| icon | 为创作者提供了将元素设置为图标等价物的能力。 | 3 |
| nav-down | 指定在何处使用箭头向下导航键时进行导航 | 3 |
| nav-index | 指定一个元素的Tab的顺序 | 3 |
| nav-left | 指定在何处使用左侧的箭头导航键进行导航 | 3 |
| nav-right | 指定在何处使用右侧的箭头导航键进行导航 | 3 |
| nav-up | 指定在何处使用箭头向上导航键时进行导航 | 3 |
| outline-offset | 外轮廓修饰并绘制超出边框的边缘 | 3 |
| resize | 指定一个元素是否是由用户调整大小 | 3 |
