Antara muka pengguna CSS3

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

saiz CSS3 (Ubah Saiz)

Dalam CSS3, atribut ubah saiz menentukan sama ada elemen perlu diubah saiz oleh pengguna.

Elemen div ini diubah saiz oleh pengguna. (Dalam Firefox 4+, Chrome dan Safari)

Kod CSS adalah seperti berikut:

Contoh

Pengguna menentukan saiz elemen div:

<!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>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>

Jalankan atur cara dan cuba

Saiz Kotak CSS3

Sifat bersaiz kotak membolehkan anda menentukan dengan tepat cara kandungan sesuai dengan kawasan tertentu.

Contoh

Nyatakan dua kotak bersempadan sebelah menyebelah:

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

Jalankan atur cara dan cuba

Pengubahsuaian garis besar CSS3 (garis luar-offset)

Sifat garis luar mengimbangi garisan dan lukiskan garisan di luar tepi sempadan.

Terdapat dua perbezaan antara garis besar dan sempadan:

Garis tidak menggunakan ruang yang tidak berbentuk segi empat tepat

Kejadian.

Nyatakan garis besar 15 piksel di luar tepi sempadan:

<!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>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>

Jalankan program dan cuba

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

Meneruskan pembelajaran

fail baharu

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

serahkan Tetapkan Semula Kod

Operasi automatik