Thuộc tính giao diện người sử dụng

CSS cung cấp nhiều tính năng giao diện người dùng như thay đổi kích thước các phần tử kích thước hộp.
Sau đây là danh sách một số thuộc tính chung của giao diện người dùng CSS3:

Thuộc tính Resize có 3 giá trị

• Horizontal resize
• Vertical resize
• Both (horizontal & vertical) resize.

Thuộc tính CSS3 thay đổi kích thước
Thuộc tính CSS3 thay đổi kích thước chỉ định rằng một phần tử phải được định lại kích thước bởi người dùng hay không.

Horizontal Resize

Ví dụ: để thay đổi kích cỡ chiều rộng của một phần tử <div>. (Horizontal Resize)

<style>  
div {  
    border: 2px solid;  
    padding: 20px;  
    width: 300px;  
    resize: horizontal;  
    overflow: auto;  
}  
</style>  

Xem ví dụ

Vertical Resize

Ví dụ: để thay đổi kích cỡ chiều cao của một phần tử <div>. (Vertical Resize)

<style>  
div {  
    border: 2px solid;  
    padding: 20px;  
    width: 300px;  
    resize: vertical;  
    overflow: auto;  
}  
</style>  

Xem ví dụ

Thuộc tính (horizontal & vertical) resize

Ví dụ: để thay đổi kích cỡ chiều rộng và chiều cao của một phần tử <div>. (horizontal & vertical Resize)
 

<style>  
div {  
    border: 2px solid;  
    padding: 20px;  
    width: 300px;  
    resize: both;  
    overflow: auto;  
}  
</style>  

Xem ví dụ

CSS3 Outline Offset

Thuộc tính outline-offset được sử dụng để thêm khoảng cách giữa đường viền với  phần tử chứa nội dung

Ví dụ:

<style>  
div {  
    margin: 20px;  
    padding: 10px;  
    width: 300px;  
    height: 100px;  
    border: 1px solid black;  
    outline: 1px solid red;  
    outline-offset: 10px;  
}  
</style>  

Xem ví dụ

Trình duyệt hỗ trợ

Thuộc tính	Chrome	IE	Firefox	Safari	Opera
resize	4.0	Không hỗ trợ	5.04.0 -moz-	15.0	4.0
outline-offset	4.0	Không hỗ trợ	5.0 4.0 -moz-	9.5	4.0