Để thực hiện việc này, bạn cần phải có ảnh có tính chất tương tự, tức là có thể lập đi lặp lại được, và cụ thể ở đây là lặp theo chiều dọc (trục y)
Có thể xem hình mẫu này :
☼ragged-right.gif
☼ragged-right.gif
Và đây là code CSS của thủ thuật này. và để áp dụng cho blog, bạn chỉ việc thêm đọan code CSS này vào trước dòng ]]></b:skin> trong code template của blog.
☼Code CSS:
.outerx{
width:50%;
margin-left:25%;
border:1px solid #000;
background:#fff url(ragged-right.gif) repeat-y left top;
}
.innerx{
background:transparent url(ragged-left.gif) repeat-y right top;
width:100%;
padding:1em 0;
}
.outerx p{
padding:0 20px;
margin:0 0 1em 0
}
- Thay link ảnh (code màu xanh) thành link của bạn,hoặc có thể sử dụng hình mẫu.
- Chú ý: dòng lệnh padding:0 20px; đây là lênh để căn trái và phải cho khung nội dung. và độ rộng của việc căn lề này bằng độ rộng của ảnh (có thể lớn hơn, tùy bạn, nhưng không nên để nhỏ hơn)
☼ code HTML:
<div class="outerx">
<div class="innerx">
<p>
{Nội dung của bạn}
</p>
</div>
</div>
posst thử xem sao
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.