CSS3 - 使用者介面

使用者介面屬性允許您將任何元素更改為幾個標準使用者介面元素之一。

一些在 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 當您在鍵盤上按下向上箭頭按鈕時，用於向上移動。

resize 屬性示例

resize 屬性具有三個常見的取值，如下所示：

horizontal
vertical
both

在 css3 使用者介面中使用both值在 resize 屬性中：

即時演示

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

它將產生以下結果：

列印頁面