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

  • Internet Explorer9
  • Firefox4
  • Opera10.5
  • Google Chrome10
  • Safari5.1

Hệ điều hành Smartphone – Tablets

  • IOS3.2
  • Android2.1
  • Window phone7.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:

 

Download file để thực hành

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>

Hiển thị trình duyệt:

 

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *