CSS3 - 用户界面

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

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

先生。 价值与描述
1

外貌

用于允许用户将元素制作为用户界面元素。
2

盒子尺寸

允许用户以清晰的方式固定区域上的元素。
3

图标

用于提供区域上的图标。
4

调整大小

用于调整区域内元素的大小。
5

轮廓偏移

用于绘制后面的轮廓。
6

导航向下

用于在按下键盘中的向下箭头按钮时向下移动。
7

导航左

当您按下键盘上的向左箭头按钮时，用于向左移动。
8

导航右

当您按下键盘中的右箭头按钮时，用于向右移动。
9

导航向上

用于在按下键盘中的向上箭头按钮时向上移动。

调整属性大小的示例

Resize 属性具有三个常见值，如下所示 -

  • 水平的
  • 垂直的
  • 两个都

在 css3 用户界面中的 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>

它将产生以下结果 -