[BB-like-html code] Chapter 1: Các kiểu border

[Ôn Song Tú]

Hôm nay chúng ta sẽ bắt đầu 1 series hướng dẫn dài kỳ, một thuật ngữ là lạ mới xuất hiện (trên tựa topic), các bạn đang tự hỏi nó là gì?

Là một thuật ngữ do người viết bài này sáng lập ra, một sự kết hợp giữa bbcode và htmlcode

Nguyên văn bởi Hei

àh cũng lưu ý về việc xài mẹo này nha =)
nếu ai cố tình làm mẹo để dc như post phía trên của bạn thuốc lá để phá thì có thể ăn thẻ tùy theo mức độ của bài post =)
p/s: àh del post đó rồi =), nói chung cũng như rotate và skew đi =), cố tình làm hỏng giao diện 4rum thì cứ biết trước là ăn thẻ vậy =)

Chapter 1: Các kiểu border

1. Solid

Text Text Text

PHP Code:

[bgcolor2=transparent; border: 5px solid blue|300|100]
Text
Text
Text
[/bgcolor2] 


 

Đây chính là code [Box] mà chúng ta thường hay xài

 

2. Double

Text Text Text

PHP Code:

[bgcolor2=transparent; border: 5px double blue|300|100]
Text
Text
Text
[/bgcolor2] 


 

3. Dotted

Text Text Text

PHP Code:

[bgcolor2=transparent; border: 5px dotted blue|300|100]
Text
Text
Text
[/bgcolor2] 


 

4. Groove

Text Text Text

PHP Code:

[bgcolor2=transparent; border: 5px groove blue|300|100]
Text
Text
Text
[/bgcolor2] 


 

5. Outset

Text Text Text

PHP Code:

[bgcolor2=transparent; border: 5px outset blue|300|100]
Text
Text
Text
[/bgcolor2] 


 

6. Inset

Text Text Text

PHP Code:

[bgcolor2=transparent; border: 5px inset blue|300|100]
Text
Text
Text
[/bgcolor2] 


 

7. Ridge

Text Text Text

PHP Code:

[bgcolor2=transparent; border: 5px ridge blue|300|100]
Text
Text
Text
[/bgcolor2] 


 

8. Dashed

Text Text Text

PHP Code:

[bgcolor2=transparent; border: 5px dashed blue|300|100]
Text
Text
Text
[/bgcolor2] 


 

9. Kết hợp

Text Text Text

PHP Code:

[bgcolor2=transparent; border-width: 5px; border-color: blue; border-style: dotted dashed double solid|300|100]
Text
Text
Text
[/bgcolor2] 


 

Chú ý: chỗ border-style có 4 style, mỗi style là một viền theo thứ tự: trên, phải, dưới, trái.

 

10. Image

Chỉ với 1 tấm ảnh như thế này:

Có thể tạo ra nhiều kiểu border khác nhau tùy thuộc vào mấy cái thông số: (cái viền trang trí cho bài viết này cũng là từ cái ảnh trên mà ra )

Text
Text
Text

 

[bgcolor=white; border-width: 27px; border-style:solid; -moz-border-image: url('http://www.w3.org/TR/css3-background/border.png') 27 repeat; -webkit-border-image: url('http://www.w3.org/TR/css3-background/border.png') 27 repeat][limit=300]
Text
Text
Text
[/limit][/bgcolor]

 

Text
Text
Text

 

[bgcolor=white; border-width: 27px; border-style:solid; -moz-border-image: url('http://www.w3.org/TR/css3-background/border.png') 27 round; -webkit-border-image: url('http://www.w3.org/TR/css3-background/border.png') 27 round][limit=300]
Text
Text
Text
[/limit][/bgcolor]

 

Text
Text
Text

 

[bgcolor=white; border-width: 27px; -moz-border-image: url('http://www.w3.org/TR/css3-background/border.png') 27 stretch; -webkit-border-image: url('http://www.w3.org/TR/css3-background/border.png') 27 stretch][limit=300]
Text
Text
Text
[/limit][/bgcolor]

 

Text
Text
Text

 

[bgcolor=white; border-width: 40px; -moz-border-image: url('http://www.w3.org/TR/css3-background/border.png') 40 stretch; -webkit-border-image: url('http://www.w3.org/TR/css3-background/border.png') 40 stretch][limit=300]
Text
Text
Text
[/limit][/bgcolor]

 

Text
Text
Text

 

[bgcolor=white; border-width: 34px; border-style:solid; -moz-border-image: url('http://www.w3.org/TR/css3-background/border.png') 34 repeat stretch; -webkit-border-image: url('http://www.w3.org/TR/css3-background/border.png') 34 repeat stretch][limit=300]
Text
Text
Text
[/limit][/bgcolor]

 

Để cho dễ hiểu hơn về mấy cái thông số này, bạn vào trang sau http://border-image.com, nghịch tí là mò dc thôi

Chú ý: theo trang trên, code có tới 4 dòng (ko tính border-width), mình chỉ lấy 2 dòng đầu là cho 2 trình duyệt phổ biến nhất là FF và Chr, 2 dòng còn lại cho các trình duyệt ít phổ biến hơn)

[Hei]

àh cũng lưu ý về việc xài mẹo này nha =)
nếu ai cố tình làm mẹo để dc như post phía trên của bạn thuốc lá để phá thì có thể ăn thẻ tùy theo mức độ của bài post =)
p/s: àh del post đó rồi =), nói chung cũng như rotate và skew đi =), cố tình làm hỏng giao diện 4rum thì cứ biết trước là ăn thẻ vậy =)

[berserkher]

Đúng là không gì là không thể

[heokhoc_elf_0701]

có viền đúng là đẹp hơn
còn cái mẹo các bạn nói là gì vậy

[Ushiromiya Maria]

Mình bắt đầu khâm phục cái sự rảnh rỗi của các bạn rồi đó @@

[narubees]

Test:

Cũng đẹp đấy chứ

[.Jinny]

[maraschino912]

hình như ko lấy hình trong máy nhà lên dc. (đang xài code)

/
/
/
/
/
/

/
/
/

/
/

/
/
/

/
/
/
/

/
/

/
/

/
/

/
/

/
/

/
/
/

/
/
/
/

/
/

cái bgcolor=... hình như ko có tác dụng gì với cái hình giữa

Text
Text
Text

[K.M.C]

Nguyên văn bởi Hei

àh cũng lưu ý về việc xài mẹo này nha =)
nếu ai cố tình làm mẹo để dc như post phía trên của bạn thuốc lá để phá thì có thể ăn thẻ tùy theo mức độ của bài post =)
p/s: àh del post đó rồi =), nói chung cũng như rotate và skew đi =), cố tình làm hỏng giao diện 4rum thì cứ biết trước là ăn thẻ vậy =)

Em không hiểu ạ, mẹo nào thế

[dobato.love]

chắc là dùng limit quá rộng hoặc ko dùng limit, quá cỡ khung cho mỗi bài post