Border-radius: Cách Bo Tròn Góc Cho Đối Tượng
Những năm gần đây CSS3 được sử dụng rộng rãi vì nhiều trình duyệt hỗ trợ hiển thị CSS3 rất tốt. Trong các thuộc tính thì Border-radius được nhiều người sử dụng trong thiết kế website, hoặc cũng có thể sử dụng để bo góc hình ảnh. Bài viết này sẽ hướng dẫn các bạn làm như thế nào để sử dụng được thuộc tính Border-radius tốt nhất.
- Cấu trúc:
Border-radius: giá trị;
Ví dụ để bo góc tròn cho một đối tượng:
Và bạn sẽ được hình như bên dưới:
- Để hiển thị tốt trên các trình duyệt như Google Chrome, Opera, Firefox vv các bạn thêm 1 số mã vào trước border-radius
+ Hiển thị tốt trên trình duyệt Google Chrome và Safari: -webkit-border-radius: 40px;
+ Hiển thị tốt trên Opera: -o-border-radius: 40px;
+ Hiển thị tốt trên Internet Explorer: -ms-border-radius: 40px;
+ Hiển thị tốt trên firefox: -moz-border-radius: 40px;
Như vậy khi viết CSS bạn phải viết border-radius: 40px và cả 4 dòng ở trên
- Chỉ bo tròn góc trên bên trái thì ta viết: border-top-left-radius: 5px;
- Chỉ bo tròn góc trên bên phải thì ta viết: border-top-right-radius: 5px;
- Chỉ bo tròn góc dưới bên trái: border-bottom-left-radius: 5px;
- Chỉ bo tròn góc dưới bên phải: border-bottom-right-radius: 5px;
Tôi sẽ lấy 1 ví dụ bó góc của một bức ảnh như sau:
Ok trên đây là một chút hướng dẫn cách bạn sử dụng thuộc tính border-radius để bo góc cho một đối tượng bằng cách sử dụng CSS3
Chúc bạn học tốt
Thuộc tính Border-radius
- Cấu trúc:
Border-radius: giá trị;
Ví dụ để bo góc tròn cho một đối tượng:
<html>
<head>
<style>
.bodgoc {
width: 40px;
height:40px;
background: #000;
border-radius: 40px;
}
</style>
</head>
<body>
<div class='bogoc'>Hello</div>
</body>
</html>
Và bạn sẽ được hình như bên dưới:
+ Hiển thị tốt trên trình duyệt Google Chrome và Safari: -webkit-border-radius: 40px;
+ Hiển thị tốt trên Opera: -o-border-radius: 40px;
+ Hiển thị tốt trên Internet Explorer: -ms-border-radius: 40px;
+ Hiển thị tốt trên firefox: -moz-border-radius: 40px;
Như vậy khi viết CSS bạn phải viết border-radius: 40px và cả 4 dòng ở trên
2/ Các thuộc tính của Border-radius
- Bo góc tròn 4 góc thì ta sử dụng border-radius: 5px;- Chỉ bo tròn góc trên bên trái thì ta viết: border-top-left-radius: 5px;
- Chỉ bo tròn góc trên bên phải thì ta viết: border-top-right-radius: 5px;
- Chỉ bo tròn góc dưới bên trái: border-bottom-left-radius: 5px;
- Chỉ bo tròn góc dưới bên phải: border-bottom-right-radius: 5px;
Tôi sẽ lấy 1 ví dụ bó góc của một bức ảnh như sau:
<html>
<head>
<style>
img {
width:250px;
height: 300px;
border-top-left-radius: 0px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 0px;
}
</style>
</head>
<body>
<img src="hinh-anh.jpg"/>
</body>
</html>
Chúc bạn học tốt
Nhận xét
Đăng nhận xét