CSS3 - Giao diện người dùng

Thuộc tính giao diện người dùng cho phép bạn thay đổi bất kỳ phần tử nào thành một trong một số phần tử giao diện người dùng tiêu chuẩn.

Một số thuộc tính phổ biến đang sử dụng trong giao diện Người dùng css3.

Sr.No. Giá trị & Mô tả
1

appearance

Được sử dụng để cho phép người dùng tạo các phần tử làm phần tử giao diện người dùng.

2

box-sizing

Cho phép người dùng sửa chữa các phần tử trên khu vực một cách rõ ràng.

3

icon

Được sử dụng để cung cấp biểu tượng trên khu vực.

4

resize

Được sử dụng để thay đổi kích thước các phần tử nằm trên khu vực.

5

outline-offset

Dùng để vẽ đường viền phía sau.

6

nav-down

Được sử dụng để di chuyển xuống khi bạn nhấn vào nút mũi tên xuống trên bàn phím.

7

nav-left

Được sử dụng để di chuyển sang trái khi bạn nhấn vào nút mũi tên trái trên bàn phím.

số 8

nav-right

Được sử dụng để di chuyển sang phải khi bạn nhấn vào nút mũi tên phải trên bàn phím.

9

nav-up

Được sử dụng để di chuyển lên khi bạn nhấn vào nút mũi tên lên trên bàn phím.

Ví dụ về thuộc tính thay đổi kích thước

Thuộc tính thay đổi kích thước có ba giá trị phổ biến như được hiển thị bên dưới:

  • horizontal
  • vertical
  • both

Sử dụng both giá trị trong thuộc tính thay đổi kích thước trong giao diện người dùng 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>

Nó sẽ tạo ra kết quả sau:

CSS3 Outline offset

Out line có nghĩa là vẽ một đường xung quanh phần tử ở bên ngoài đường viền.

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

Nó sẽ tạo ra kết quả sau: