Background image với 3 tag
Sử dụng 3 tag để tạo background corner, ưu điểm của phương pháp này có thể co giản theo chiều dọc vô tận, khuyết điểm là hạn chế co giản theo chiều ngang, sử dụng 3 thẻ.
Văn bản – tạo background corner với 3 tag
Sử dụng 3 tag để tạo background corner, ưu điểm của phương pháp này có thể co giản theo chiều dọc vô tận, khuyết điểm là hạn chế co giản theo chiều ngang, sử dụng 3 thẻ.
Chỉ nên sử dụng phương pháp này đối với nội dung dài, có khả năng co giản theo chiều dọc.
Chú ý: nên sử dụng cả 3 là background sẽ dễ điều khiển nội dung hơn so với phương pháp 2 background kết hợp với border 2 bên.
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.block { /* sử dụng bg giữa lặp chiều dọc repeat-y + chiều rộng */
background: url(https://hocwebchuan.com/images/chuyende/bg_corner_m.gif) repeat-y left top;
width: 655px;
}
div.inner { /* sử dụng bg bottom */
background: url(https://hocwebchuan.com/images/chuyende/bg_corner_b.gif) no-repeat left bottom;
}
div.division { /* sử dụng bg top + padding 4 hướng */
background: url(https://hocwebchuan.com/images/chuyende/bg_corner_t.gif) no-repeat left top;
padding: 10px;
}
div.division p {
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="block">
<div class="inner">
<div class="division">
<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, 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>
<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, 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>
<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, 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>
</div>
</div>
</body>
</html>