CSS3ユーザーインターフェース
CSS3 ユーザー インターフェイス
CSS3 ユーザー インターフェイス
CSS3 では、要素のサイズ、ボックスのサイズ、外枠を調(diào)整するための新しいユーザー インターフェイス機(jī)能がいくつか追加されています。
この章では、次のユーザー インターフェイス プロパティについて學(xué)習(xí)します:
resizebox-sizingoutline-offset
CSS3 サイズ変更 (サイズ変更)
CSS3 では、resize 屬性は要素のサイズを変更するかどうかを指定します。ユーザーのサイズ。
この div 要素はユーザーによってサイズ変更されます。 (Firefox 4 以降、Chrome、Safari の場(chǎng)合)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>調(diào)整屬性指定一個(gè)元素是否由用戶可調(diào)整大小的。.</div>
</body>
</html>CSS3 ボックス サイズ設(shè)定
ボックス サイズ設(shè)定プロパティを使用すると、コンテンツが特定の領(lǐng)域にどのように収まるかを正確に定義できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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">這個(gè)div占據(jù)了左邊的一半。.</div>
<div class="box">這個(gè)div占據(jù)了右邊的一半。</div>
</div>
</body>
</html>CSS3 アウトライン変更 (outline-offset)
outline-offset プロパティは、アウトラインをオフセットし、境界線の端を越えてアウトラインを描畫(huà)します。
アウトラインは 2 つの點(diǎn)で境界線と異なります:
アウトラインはスペースをとらない アウトラインは長(zhǎng)方形でなくてもよい
この div には境界線の 15 ピクセル外側(cè)にアウトラインがあります。
CSS コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>這個(gè) div有一個(gè)輪廓邊界15 px邊境外的邊緣。</div>
</body>
</html>新しいユーザー インターフェイス機(jī)能
屬性 要素を標(biāo)準(zhǔn)のユーザーインターフェイス要素のように見(jiàn)せる 3 -sizing を使用すると、ロケールに合わせて特定の要素を定義できます。 3
オーサリング用アイコン 要素を同等のアイコンに設(shè)定する機(jī)能を提供します。 3
