Background corner với 2 tag
Với việc sử lý background lặp conner, đôi khi không giải quyết được bằng CSS3 trong trường hợp background lặp là dạng image phức tạp, với cách sử dụng sau sẽ giúp ta giải quyết được vấn đề.
Văn bản với background corner
Thể hiện một đoạn văn bản đơn giản bằng tag <p> với background corner bao quanh.
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 {
background: url(https://hocwebchuan.com/images/chuyende/bg_corner_bottom.gif) no-repeat left bottom;
width: 655px;
}
div.block p {
background: url(https://hocwebchuan.com/images/chuyende/bg_corner_top.gif) no-repeat left top;
padding: 10px;
}
</style>
</head>
<body>
<div class="block">
<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>
</body>
</html>
Hiển thị trình duyệt:
Cách sử dụng bên trên không thể sử dụng với 2 đoạn văn sử dụng <p> (không nên sử dụng 2 <br /> liên tiếp để thể hiện 2 đoạn văn), nếu gặp dạng nhiều hơn 2 đoạn văn như vậy ta cần sử dụng thêm một tag <div>.
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 {
background: url(https://hocwebchuan.com/images/chuyende/bg_corner_bottom.gif) no-repeat left bottom;
width: 655px;
}
div.block div {
background: url(https://hocwebchuan.com/images/chuyende/bg_corner_top.gif) no-repeat left top;
padding: 10px;
}
div.block div p {
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="block">
<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, 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>
</body>
</html>