Border radius với paragrapth
Sử dụng border-radius chúng ta sẽ dễ dàng tạo border bo góc mà không cần sử dụng bất kỳ background image nào, mọi việc sẽ trở nên dễ dàng hơn chỉ vài dòng code.
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
5
5.1
Hệ điều hành Smartphone – Tablets
3.2
2.1
7.5
border-radius cho đoạn văn bản
Sử dụng border-radius cho đoạn văn bản đơn giản, thế mạnh của cách dùng này là border có thể co giản tùy ý theo chiều ngang hay dọc, nhưng hạn chế về trình duyệt.
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;
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:
border-radius với đoạn văn bản có image title và link
Trường hợp đoạn văn bảng có nhiều thành phần, nếu xử lý bằng background thì ta sẽ sử dụng nhiều tag và xử lý background image không đơn giản, chúng ta cần sử dụng 3 images cho top, bottom và có khi cho cả phần content, nhưng nếu sử dụng border-radius thì mọi việc sẽ trở nên đơn giản hơ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 {
border: 2px solid #cc0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}
p.image {
float: left;
width: 130px;
}
div.box {
margin-left: 140px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */
}
div.box h3 {
margin-bottom: 5px;
}
div.box p {
padding-bottom: 15px;
text-align: justify;
}
div.box p.detail {
padding: 0;
}
div.box p a {
background: url(https://hocwebchuan.com/images/chuyende/ico_arrow.gif) no-repeat left center;
color: blue;
padding-left: 10px;
text-decoration: underline;
}
div.box p a:hover {
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="block clearfix">
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard.gif" alt="Học Web Chuẩn" /></p>
<div class="box">
<h3>Headline h3</h3>
<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 class="detail"><a href="http://hocwebchuan.com">Chi tiết</a></p>
</div>
</div>
</body>
</html>
Hiển thị trình duyệt:
border-radius với đoạn văn bản có background line
Không khó khăn gì nếu chúng ta đã biết cách dùng border-radius, chỉ cần xử lý thêm background image cho line thì sẽ giải quyết được.
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 {
border: 2px solid #cc0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}
div.box p {
background: url(https://hocwebchuan.com/images/chuyende/bg_line.gif) repeat left top;
line-height: 2.07;
margin-bottom: 20px;
padding-top: 4px;
}
</style>
</head>
<body>
<div class="block">
<div class="box">
<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. Đ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. Đ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>