Pixel tròn css

Thuộc tính đường viền trong css3 được sử dụng để định dạng các góc định dạng của đường viền bên ngoài định dạng đã được định nghĩa ở css2 (Xem thêm về đường viền trong css2)

Constructor

tag {
    border: bề-dày kiểu mã-màu;
    border-radius: giá trị;
    -moz-border-radius: giá trị;
    -webkit-border-radius: giá trị;
    -ms-border-radius: giá trị;
    -o-border-radius: giá trị;
}

in which

• -moz-animation support for firefox
• -webkit-animation hỗ trợ cho Google Chrome và Safari
• -ms-animation support for Internet Explorer
• -o-animation support for Opera

viết HTML

border image

Show the browser when not have CSS

viết CSS

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Show the browser when has CSS

• Trang chủ
• HƯỚNG DẪN HỌC
• Hướng dẫn học CSS3
• bán kính đường viền

bán kính biên giới là gì?

Đối với các góc bo tròn, nếu không sử dụng

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

1 thì sẽ rất phức tạp khi chỉ sử dụng CSS

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

1 cho phép tạo góc bo góc hoạt động, cấu trúc đơn giản dễ sử dụng

Constructor

tag {
    border-radius: giá-trị;
}

Giá trịVDMô tảpx5pxĐộ bo góc tròn tính theo pixel%50%Độ bo góc tròn tính theo %

Cách sử dụng

viết HTML

Border - radius

Viết CSS - khi chưa sử dụng bán kính đường viền

div {
    border: 3px solid #ffcccc;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 100px;
}

Show the browser

Bây giờ ta sẽ sử dụng

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

1 để điều chỉnh góc bo tròn của 4 góc như sau

viết CSS

div {
    border: 3px solid #ffcccc;
    border-radius: 10px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 100px;
}

Show the browser

Look results on, ta thấy 4 góc của

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

4 đã được thay đổi sang góc quay.
VD sau đây sẽ cho ta biết rõ hơn về cách sử dụng

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

1, với cách sử dụng giá trị phần trăm (%).

viết CSS

border image

2

Show the browser

Ví dụ bổ sung

Chúng ta có thể điều khiển từng góc riêng biệt vì điều khiển cùng lúc 4 góc

Thuộc tínhVDMô tảbiên giới- top-left -radius border-top-left-radius. 5pxĐộ bo tròn góc trên - bên trái. đường viền- top-right -bán kính đường viền-trên-phải-bán kính. 5pxĐộ góc bo tròn trên - bên phải. đường viền- dưới cùng bên trái -radiusborder-bottom-left-radius. 5pxĐộ bo tròn góc dưới - bên trái. đường viền- bottom-right-radiusborder-bottom-right-radius. 5pxĐộ góc bo tròn bên dưới - bên phải

viết HTML

Border - radius

viết CSS

border image

4

Show the browser

Đến đây chắc các bạn đã biết cách dùng

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

1 như thế nào, các bạn cũng có thể xem nhiều ví dụ hơn tại phần tham khảo bán kính đường viền hoặc xem công cụ tạo bán kính đường viền nhé.

1) Thuộc tính bán kính đường viền trong CSS

- Thuộc tính bán kính đường viền được sử dụng để thiết lập "độ cong" các góc của phần tử HTML

- Ví dụ

Góc của phần tử này có độ cong là 10px

• Góc trên bên trái của phần tử này có độ cong là 0px
• Góc trên bên phải của phần tử này có độ cong là 50px
• Góc dưới bên trái của phần tử này có độ cong là 50px
• Góc dưới bên phải của phần tử này có độ cong là 100px

- Lưu ý. Chúng ta chỉ thấy được các góc của phần tử cong khi phần tử được thiết lập đường viền hoặc màu nền

2) Cách sử dụng thuộc tính border-radius trong CSS

- Để sử dụng thuộc tính border-radius, ta sử dụng cú pháp như sau

border image

0

- Trong đó, ta thấy giá trị thuộc tính border-radius có thể được xác định bởi một trong các loại

điểm ảnh

-Xác định tốc độ công cụ dựa trên giá trị pixel cụ thể

View ví dụ phần trăm

-Xác định tốc độ của các gốc dựa trên Tỷ lệ % kích thước của phần tử

Xem ví dụ chiều rộng/chiều cao

- Độ cong của các góc được xác định dựa trên chiều rộng & chiều cao chỉ định

Xem ví dụ ban đầu

- Use default value of it

(default thì các góc của phần tử không có độ cong)

View ví dụinherit

- Kế thừa giá trị thuộc tính border-radius từ phần tử cha của nó

Xem ví dụ

3) Thiết lập tốc độ cong của từng góc

- Khi chúng ta sử dụng thuộc tính bán kính đường viền với cú pháp ở phần hướng dẫn phía trên thì mặc định cả bốn góc của phần tử sẽ có chung một tốc độ

- Tuy nhiên, nếu muốn mỗi góc của phần tử có một mức độ đặc biệt (giống ví dụ bên dưới), thì ta phải làm như thế nào. ?

• Góc trên bên trái của phần tử này có độ cong là 10px
• Góc trên bên phải của phần tử này có độ cong là 40px
• Góc dưới bên trái của phần tử này có độ cong là 50%
• Góc dưới bên phải của phần tử này có độ cong là 100px

- Để xác định tốc độ cong ở từng góc của phần tử, ta có một số cú pháp như sau

3. 1) Cú pháp 1

border image

1

• Góc trên cùng bên trái của phần tử sẽ có độ cong là giá trị1
• Góc trên bên phải của phần tử sẽ có độ cong là value2
• Góc dưới bên phải của phần tử sẽ có công suất là giá trị3
• Góc dưới bên trái của phần tử sẽ có cong là value4

---

border image

2

Xem ví dụ

3. 2) Cú pháp 2

border image

3

• Góc trên cùng bên trái của phần tử sẽ có độ cong là giá trị1
• Góc trên bên phải và dưới cùng bên trái của phần tử sẽ có độ cong là giá trị2
• Góc dưới bên phải của phần tử sẽ có công suất là giá trị3

---

border image

4

Xem ví dụ

3. 3) Cú pháp 3

border image

5

• Góc trên cùng bên trái & dưới cùng bên phải của phần tử sẽ có độ cong là giá trị1
• Góc trên bên phải & dưới cùng bên trái của phần tử sẽ có độ cong là giá trị2

---

border image

6

Xem ví dụ

4) Thiết lập độ cong của từng góc (khi giá trị là chiều rộng/chiều cao)

- Nếu ta thiết lập tốc độ cong từng gốc của phần tử theo cách xác định tốc độ công dựa trên chiều rộng & chiều cao chỉ định thì cú pháp sẽ tương phản với ba cú pháp ở phần hướng dẫn phía trên