Loading post navigation ...
 
 

Pro page

4
Nhận xét

Bo góc với CSS3

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Trước kia khi chúng ta muốn thực hiện định dạng một góc vuông mà bo bốn góc thì chúng ta cần phải dùng đến Javascript hoặc những kỹ thuật khá phức tạp (kỹ thuật 4 div hoặc 3 div). Tuy nhiên hiện nay CSS3 cho phép chúng ta thực hiện điều đó hết sức đơn giản.



Để minh chứng cho điều đó sau đây chúng ta cùng thực hiện một kỹ thuật đơn giản đó là bo góc cho một box vuông với CSS3.

►Ví dụ minh họa

Khi chưa bo góc....

Chúng ta thực hiện kỹ thuật bo góc của box vuông với đoạn code sau :

<div style="-moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #CCCCCC; padding: 10px;" >

►Kết quả

Sau khi bo góc

►Lưu ý: Có một vấn đề nảy sinh đó là hiện tại không phải trình duyệt nào cũng hỗ trợ chúng ta làm với CSS3, đối với một số trình duyệt cũ thì cũng ta vẫn phải sử dụng những kỹ thuật cũ để thực hiện bo góc. Còn với một số trình duyệt như Mozila/Firefox, Safari 3 thì chúng ta thỏa sức sáng tạo với những kỹ thuật của CSS3.



Enter your mail address:

4

Ngankvn ®

Có thể hướng dẫn mình kỹ thuật cũ ko ??? Áp dụng đc với nhiều trình duyệt ấy !!!

Mình từng bo góc cho các Sidebar Widget bằng Image , cách này khá ổn , nhưng mình phải bỏ cách này khi có một vài Widget phải ẩn đi ( ko muốn xuất hiện trên trang chủ , chỉ hiện trên bài viết ) và khi ẩn như vậy thì "Widget đc ẩn - nhưng cái Image lại ko chịu ẩn " nhìn rất tếu :))

fandung

Mình đã viết 1 bài về bo góc dùng với CSS

Bạn có thể vào đây để xem.

Khách (ẩn danh)

trước khi bo góc thì có thêm 3 dấu chấm. kết quả sau khi bo góc thì mất đi 3 dấu chấm. ngoài ra hổng thấy gì nữa hết. (xỉu) bo góc gì zdậy trời?

fandung-tester

Xin lỗi bạn, đây nếu là ý kiến của bạn thì mình xin giải thích là :
+ thứ 1 nó chỉ là ví dụ (có dấu chấm hay không ko fải là vấn đề)
+ thứ 2 và thủ thuật này là thủ thuật mới CSS3 và nó chỉ là áp dụng được cho FireFox (bạn nên đọc kĩ bài viết trước khi comment), vì thế nếu bạn xem bài viết với trình duyệt khác thì sẽ không thấy được kết quả.

- Còn nếu bạn có ý nào khác thì xin bạn giữ lời chút. Ở đây mình post bài dựa trên tìm tòi và có hiểu biết, chứ không phải spam. Mong bạn hiểu cho.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» 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.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home