Miso Blog

Border-radius và box-shadow trong CSS3

Wednesday, 31 March 2010 09:57 Viewed: 8244 times 15 Comments

Từ hôm nay bắt đầu học hỏi về CSS3 :P. Mình đúng là chậm tiến quá, nó ra đời bao lâu rồi mà mình vẫn chưa ngó ngàng gì cả, đến giờ vẫn chẳng biết tý gì. Căn bản là CSS3 thêm rất nhiều cái khác biệt so với CSS2, nghiên cứu 1 chút coi như là để vẽ vời thêm cho blog lúc rảnh ;))

Border-radius

Đầu tiên là cái bo tròn góc. Mình không thích dùng từ "bo tròn", nghe nó cứ ngố ngố thế nào ấy =.=". Nhưng mà dịch sang tiếng Việt cũng chẳng biết gọi là gì, tiếng Anh nói gọi là Border-Radius. Sau đây là cách làm:

.box {
   -moz-border-radius: 5px; /* for Mozilla browsers */
   -webkit-border-radius: 5px; /* for webkit browsers (Chrome, Safari) */
   border-radius: 5px; /* for Opera and others */
   border: 1px solid gray;
   background: #EAEAEA;
   padding: 5px 10px;
}

Style cho CSS là như thế, xong rồi tạo một <div class="box">, nó sẽ được thế này:

Các góc vuông của div được nắn tròn vào 5px (có thể thay đơn vị bằng em)
Nhưng mà hình như chỉ mới chạy tốt trên Firefox 3 và Safari 3 trở lên thôi
Kệ, cứ W3C ra cái gì là sau này bọn trình duyệt phải nâng cấp lên hết :))

Nó còn có thể thế này nữa: thích bo tròn góc nào thì bo. Thế mới ác :|. Sử dụng cái này: 

-moz-border-radius-topleft: 5px; /* for Mozilla */
-webkit-border-top-left-radius: 5px; /* for webkit */
border-top-left-radius: 5px; /* for Opera */

Đây là kết quả:

Chỉ bo tròn góc phía trên bên trái

Tương tự cứ việc thay đổi thông số trái phải trên dưới đi là được:

Chỉ bo tròn góc phía trên bên phải
Chỉ bo tròn góc phía dưới bên trái
Bo tròn cả 2 góc phía dưới, bên ít bên nhiều

  -moz-border-radius là để có tác dụng trên Firefox, -webkit-border-radius là để có tác dụng với Chrome, Safari, border-top-left-radius có tác dụng với Opera. Còn IE thì không hỗ trợ cái này T.T

Box-shadow

Nhân tiện ghi chép luôn về box-shadow (thuộc tính tạo bóng đổ trong CSS3). Để tạo bóng đổ cho box (div), ta thêm vào trong class hoặc id của CSS như sau:

-moz-box-shadow: 5px 5px 8px #7A7A7A; /* for Mozilla */
-webkit-box-shadow: 5px 5px 8px #7A7A7A; /* for webkit */
box-shadow: 5px 5px 8px #7A7A7A; /* for Opera */

Được kết quả thế này:

Đây là box vừa radius vừa shadow. Trong đó giá trị của shadow được hiểu lần lượt như sau:
  • Độ dài của shadow theo chiều ngang (horizotal) là 5px (cũng có thể hiểu là box đổ bóng về bên phải 5px)
  • Độ cao dài của shadow theo chiều dọc (vertical) là 5px (đổ bóng xuống dưới 5px)
  • Độ mờ dần (blur) của shadow là 8px
  • Màu của shadow là #7A7A7A

Có thể đặt giá trị âm cho chiều ngang và chiều dọc của shadow để box đổ bóng về các hướng ngược lại
Độ mờ dần có thể đặt bằng 0 hoặc không viết nữa. Như vậy nếu viết 5px 8px #7A7A7A thì nó hiểu là chiều ngang 5px, chiều dọc 8px và không mờ dần.

Chia buồn với bác nào xài IE, sẽ chẳng thấy nó thay đổi tý nào đâu :(


rssfeed Subscribe
MisoBlog RSS
Hứng thú với những bài viết trên MisoBlog? Hãy thử đăng ký nhận tin mới qua email, hoặc chia sẻ bài viết bằng thanh công cụ dưới đây.
Email Twitter Facebook Myspace Stumbleupon Digg Delicious Technorati blogger google reddit Yahoo
Tags:

Bài viết liên quan

Comments  

thaiphat 2010-04-03 00:35#
thật là ghê gớm quá, em thích hai cái bóng đổ với bo góc này rồi đấy ;-)) :-x
Reply
Misoat 2010-04-03 01:18#
Hê hê ghê không, tớ bắt đầu nghịch CSS3 từ sau hôm bác đổi theme mới đấy ;-)). Tự nhiên thấy text của bác cứ nổi nổi, nhìn giống kiểu ClearType ở Windows ấy, tớ về áp dụng cho blog tớ luôn (cái text-shadow hehe).
Reply
Misoat 2010-04-23 10:56#
Sau khi test kỹ lại, mình nhận ra Opera cũng hỗ trợ box-shadow và border-radius ^^!
Đã update lại bài viết.
Reply
Do Van Manhat 2010-06-30 15:28#
không chay trên ie sao bạn. mình đang ùng ie 6.
Reply
Misoat 2010-07-01 09:51#
Trên IE thì không chạy được đâu bạn ạ.
Reply
lrandomat 2010-07-21 10:35#
trên ie thì bạn phải down file htc ve la chay ngon ak.
Reply
max2maxat 2010-07-30 23:39#
Bạn lrandom nói đúng rồi đó, đấy là cách hack CSS3 trên IE :P
Reply
quynhat 2010-11-20 11:42#
hay..............
Reply
Minh Quânat 2010-12-01 14:24#
Có thể dùng cho IE9 !
Reply
Misoat 2010-12-01 17:22#
Yup! But just use this for fun :)
Reply
Tuấnat 2010-12-10 14:24#
Thế bác dùng trình duyệt gì nào ;)) firefox hở?
Reply
Misoat 2010-12-10 20:50#
Yup! Chủ yếu vẫn là Firefox.
Reply
Duong Le Bacat 2011-07-12 19:30#
có cách nào chạy trên IE được không?
Reply
Misoat 2011-07-13 12:00#
Có.
Bạn tham khảo tại đây: css3pie.com
Reply
Luat doanh nghiepat 2012-05-16 11:33#
STYLE ở trong phần bo tròn là gì bạn nhỉ??
Reply

Wanna say something?