Box-shadow cho hình tròn
Sử dụng box-shadow cho thành phần hình tròn sẽ giúp cho thành phần đẹp hơn, chúng ta có thể chọn shadow ngoài hay trong bằng cách thêm giá trị inset.
Trình duyệt – hệ điều hành hỗ trợ
Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:
Trình duyệt
9
4
10.5
10
5.1
Hệ điều hành Smartphone – Tablets
3.2
2.1
7.5
box-shadow một số định dạng thường dùng phần 02
- Sử dụng box-shadow kết hợp với border-radius tạo định dạng thường gặp trong các banner hay các tiêu đề dạng hình tròn.
- Tham khảo thêm box-shadow
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
p {
border: 5px solid #699dfb;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
/* box-shadow: ngang dọc độ-tràn-màu khoảng-cách mã-màu; */
-moz-box-shadow: 0px 0px 3px 2px #999;
-webkit-box-shadow: 0px 0px 3px 2px #999;
box-shadow: 0px 0px 3px 2px #999;
display: inline-block;
font-size: 18px;
font-weight: bold;
height: 90px;
line-height: 90px;
margin: 20px;
text-align: center;
width: 90px;
}
.html {
border-color: #699dfb;
color: #699dfb;
}
.css {
border-color: #edef38;
color: #edef38;
}
.jquery {
border-color: #ef5f38;
color: #ef5f38;
}
</style>
</head>
<body>
<p class="html">HTML</p>
<p class="css">CSS</p>
<p class="jquery">JQUERY</p>
</body>
</html>
Hiển thị trình duyệt:
box-shadow sử dụng inset
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
p {
border: 5px solid #699dfb;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
/* box-shadow: ngang dọc độ-tràn-màu khoảng-cách mã-màu; */
-moz-box-shadow: 0px 0px 3px 2px #999 inset;
-webkit-box-shadow: 0px 0px 3px 2px #999 inset;
box-shadow: 0px 0px 3px 2px #999 inset;
display: inline-block;
font-size: 18px;
font-weight: bold;
height: 90px;
line-height: 90px;
margin: 20px;
text-align: center;
width: 90px;
}
.html {
border-color: #699dfb;
color: #699dfb;
}
.css {
border-color: #edef38;
color: #edef38;
}
.jquery {
border-color: #ef5f38;
color: #ef5f38;
}
</style>
</head>
<body>
<p class="html">HTML</p>
<p class="css">CSS</p>
<p class="jquery">JQUERY</p>
</body>
</html>