Thuộc tính border-radius trong CSS3

Thuộc tính border-radius là 1 thuộc tính mới xuất hiện ở HTML5. Thuộc tính này rất hữu dụng để bo tròn các góc của 1 phần tử (element) DIV hoặc SPAN. Trong quá trình thiết kế website người ta luôn sử dụng thuộc tính này để làm đẹp hình ảnh và đơn giản một điều là nó không làm ảnh hưởng đến việc load trang cho web ngược lại còn góp phần làm đẹp, tạo điểm nhấn cho hình ảnh mà bạn muốn truyền tải. Trong thủ thuật hôm nay longanit xin hướng dẫn các bạn cách để chúng ta sử dụng tính năng này.
Thuộc tính border-radius trong CSS3
Thuộc tính border-radius trong CSS3

Để bo tròn các góc của phần tử, bạn sử dụng thuộc tính border-radius


<style>
    .border1 {
        border-radius: 20px;
        background-color: green;
        color: white;
        width: 150px;
        height: 100px;
        padding: 20px;
    }
</style>

 <div class="border1">
    Ví dụ về border-radius
</div>


Bạn có thể chỉ ra từng bán kính bo tròn của các góc khác nhau:

border-radius: Rgóc-trên-trái rgóc-trên-phải r-góc-dưới-phải r-góc-dưới-trái;
border-radius: 0 0 20px 20px;

Ví dụ thiết lập bo tròn theo từng góc

<style>
    .border2 {
        border-radius: 0 0 15px 15px;
        background-color: green;
        color: white;
        width: 150px;
        height: 100px;
        padding: 20px;
    }
</style>
Gọi HTML với Style được thiết lập ở trên 
<div class="border2">
    Ví dụ về bo tròn 2 góc phía dưới
</div>


Tạo ra hình tròn

Bạn có thể chuyển hình vuông thành tròn, bằng cách điều chỉnh bán kính bo tròn các góc bằng nửa kích thước hình vuông

<style>
    div.circleexam {
        height: 200px;
        width: 200px;
        border-radius: 100px;
        line-height: 200px;
        text-align: center;
            border: 2px dashed #f69c55;
        background-color: green;
    }
    div.circleexam span{
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        color: white;
    }
</style>

<div class="circleexam">
    <span>HÌNH TRÒN</span>
</div>

Nhận xét

Được xem nhiều nhất

Uconvert miễn phí cho Office 2003, 2007, 2010, 2013

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

Sửa lỗi không move or copy được sheet của Excel

Sửa lỗi con trỏ chuột bị quay vòng vòng Windows 7/8

Chia sẻ template blogspot longanit đang sử dụng