CSS3-ユーザーインターフェイス

ユーザーインターフェイスプロパティを使用すると、任意の要素をいくつかの標準ユーザーインターフェイス要素の1つに変更できます。

css3ユーザーインターフェイスで使用されている一般的なプロパティの一部。

シニア番号	値と説明
1	appearance ユーザーが要素をユーザーインターフェイス要素として作成できるようにするために使用されます。
2	box-sizing ユーザーが明確な方法でエリアの要素を修正できるようにします。
3	icon エリアにアイコンを提供するために使用されます。
4	resize エリア上にある要素のサイズを変更するために使用されます。
5	outline-offset 輪郭の後ろを描くために使用されます。
6	nav-down キーパッドの下矢印ボタンを押したときに下に移動するために使用されます。
7	nav-left キーパッドの左矢印ボタンを押したときに左に移動するために使用されます。
8	nav-right キーパッドの右矢印ボタンを押したときに右に移動するために使用されます。
9	nav-up キーパッドの上矢印ボタンを押したときに上に移動するために使用されます。

サイズ変更プロパティの例

サイズ変更プロパティには、以下に示す3つの一般的な値があります-

horizontal
vertical
both

の使用 both css3ユーザーインターフェイスのサイズ変更プロパティの値-

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint.com</div>
   </body>
</html>

次の結果が得られます-

CSS3アウトラインオフセット

アウトラインとは、境界線の外側の要素の周りに線を引くことを意味します。

<html>
   <head>
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint</div>
   </body>
</html>

次の結果が得られます-