CSS3 - 用户界面（CSS3 - User Interface）

优质

小牛编辑

126浏览

2023-12-01

用户界面属性允许您将任何元素更改为多个标准用户界面元素之一。

在css3用户界面中使用的一些常见属性。

Sr.No.	价值和描述
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属性有三个常见值，如下所示 -

horizontal
vertical
both

在css3用户界面中使用resize属性中的both值 -

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>
   <body>
      <div>xnip.cn</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>xnip</div>
   </body>
</html>