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: