Box-shadow với đoạn văn
Sử dụng box-shadow cho đoạn văn bản đơn giản, tạo shadow cho thành phần thay thế cho cách làm truyền thống là sử dụng background.
box-shadow cho đoạn văn bản
- Sử dụng box-shadow cho đoạn văn bản đơn giản, tạo shadow cho thành phần thay thế cho cách làm truyền thống là sử dụng background.
- 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;
}
div {
border: 2px solid #cc0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
/* box-shadow: ngang dọc độ-tràn-màu khoảng-cách mã-màu; */
-moz-box-shadow: 0px 1px 10px 5px #ccc;
-webkit-box-shadow: 0px 1px 10px 5px #ccc;
box-shadow: 0px 1px 10px 5px #ccc;
margin: 20px;
padding: 10px;
}
p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng.</p>
<p>với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
box-shadow bên dưới cho đoạn văn bản
- Việc điều chỉnh một số giá trị hợp lý sẽ cho chúng ta có được vị trí shadow khác nhau, ví dụ dưới đây cho một shadow khá ấn tượng.
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;
}
div {
border: 2px solid #cc0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
/* box-shadow: ngang dọc độ-tràn-màu khoảng-cách mã-màu; */
-moz-box-shadow: 0px 23px 9px -16px #ccc;
-webkit-box-shadow: 0px 23px 9px -16px #ccc;
box-shadow: 0px 23px 9px -16px #ccc;
margin: 20px;
padding: 10px;
}
p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng.</p>
<p>với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
</div>
</body>
</html>