CSS Góc Bo Tròn

Posted on by adminChuyên mục:Kiến thức Internet

Thuộc Tính Bán Kính Đường Viền CSS

Thuộc tính CSS border-radius định nghĩa bán kính của các góc của phần tử.

Mẹo: Thuộc tính này cho phép bạn thêm đường viền tròn vào các phần tử !

Dưới đây là ba ví dụ :

  1. Góc tròn cho một phần tử có màu nền được chỉ định:
    enter image description here
  2. Góc tròn cho một phần tử có đường viền:
    enter image description here
  3. Góc tròn cho phần tử có hình nền:
    enter image description here

Ví dụ về đoạn code :

Bạn đang đọc: CSS Góc Bo Tròn 

#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

Mẹo: Các border-radius thực sự là một tài sản viết tắt cho border-top-left-radius, border-top-right-radius, border-bottom-right-radius và border-bottom-left-radius.

Bán Kính Đường Viền CSS – Chỉ Định Từng Góc

Các border-radius có thể có từ một đến bốn giá trị. Đây là các quy tắc:

Bốn giá trị – bán kính đường viền: 15px 50px 30px 5px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải, giá trị thứ ba áp dụng cho góc dưới cùng bên phải và giá trị thứ tư áp dụng cho góc dưới cùng bên trái):

enter image description here

Ba giá trị – bán kính đường viền: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái và giá trị thứ ba áp dụng cho góc dưới cùng bên phải):

enter image description here

Hai giá trị – bán kính đường viền: 15px 50px; (giá trị đầu tiên áp dụng cho các góc trên cùng bên trái và dưới cùng bên phải và giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái):

enter image description here

Một giá trị – bán kính đường viền: 15px; (giá trị áp dụng cho tất cả bốn góc, được làm tròn như nhau:

enter image description here

Ví dụ về đoạn mã code :

#rcorners1 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners2 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners3 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners4 {
    border-radius: 15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

Bạn cũng hoàn toàn có thể tạo những góc elip :
Ví dụ

#rcorners1 {
    border-radius: 50px / 15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners2 {
    border-radius: 15px / 50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners3 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;
}

admin