CSS3用户界面

CSS3用户界面 首页 / CSS入门教程 / CSS3用户界面

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

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

Sr.No.Value & Remark
1

appearance

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

2

box-sizing

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

3

icon

用于在区域上提供图标。

4

resize

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

5

outline-offset

用于在轮廓后面绘制。

6

nav-down

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

7

nav-left

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

8

nav-right

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

9

nav-up

当您按键盘上的向上箭头按钮时,用于向上移动。

无涯教程网

Resizez(调整大小)

调整大小属性具有三个常用值,如下所示-

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css3-userinterface.html

来源:LearnFk无涯教程网

  • 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>learnfk.com</div>
   </body>
</html>

它将产生以下输出-

Outline offset(轮廓线)

轮廓线表示在边框外部在元素周围画一条线。

<html>
   <head&gt
      <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>learnfk</div>
   </body>
</html>

它将产生以下输出-

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

教程推荐

AI 绘画创作入门课 -〔西瓜〕

结构学习力 -〔李忠秋〕

大厂设计进阶实战课 -〔小乔〕

正则表达式入门课 -〔涂伟忠〕

接口测试入门课 -〔陈磊〕

Node.js开发实战 -〔杨浩〕

Flutter核心技术与实战 -〔陈航〕

Linux实战技能100讲 -〔尹会生〕

SQL必知必会 -〔陈旸〕

好记忆不如烂笔头。留下您的足迹吧 :)