Trang chu moi cua Vietphotoshop
Từ khóa Tìm theo  
Tạo khung có các góc bo tròn
Người đăng: Final Fantasy
Gửi ngày 12 Tháng 4, 2008
In    Gửi mail

Bài viết này sẽ hướng dẫn các bạn làm một khung có các góc bo tròn mà ko cần hình ảnh.

Giờ chúng ta sẽ bắt đầu. Trước hết hãy tạo 1 file htm đơn giản, thêm đoạn sau vào phần <head>


CODE
<style type="text/css">

div#goctron{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
   overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>


kế đến thêm phần sau vào <body> hãy để ý phần css phía trên ở chỗ div#goctron và phần <div id="goctron".....> ở dưới đây



CODE

<div id="goctron" align="center">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Chu~ cu?a ba.n o? day !!</h1>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>




Giải thích:
(Cái này chỉ giải thích theo cách hiểu của FM nếu có gì sai mong bỏ qua)
ở đây dùng <b> như một cách để insert những phần mình đã edit trong css, thay vì phải dùng span. Nếu để ý các ban sẽ thấy các phần <b class="x"> được sắp xếp liên tiếp nhau mà mỗi <b class="x"> như thế sẽ tương ứng cho b.rx trong phần CSS (x ở đây là các số tương ứng)

r1 sẽ "thụt" xuống 5px từ "rtop"

vì (xem trong đoạn html)


CODE
<b class="rtop"><b class="r1">


tương tự thế, r2 sẽ thụt xuống 3px từ "rtop"
r3 thụt xuống 2px v.v. cứ thế, sắp xếp liên tiếp nhau sẽ tạo thành một góc tròn như chúng ta thấy

Chúc vui vẻ

© Fantomas - Vietphotoshop.com
Biên tập: heodat - vietphotoshop.com

Xem bình luận (4)

« Trở về danh mục