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>

次の結果が得られます-