| Ngày gửi: 26/09/2011 lúc 4:02 chiều | Đã khóa IP
|
|
|
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:
1..box {
2.-moz-border-radius: 5px; /* for Mozilla browsers */
3.-webkit-border-radius: 5px; /* for webkit browsers (Chrome, Safari) */
4.border-radius: 5px; /* for Opera and others */
5.border: 1px solid gray;
6.background: #EAEAEA;
7.padding: 5px 10px;
8.}
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:
1.-moz-border-radius-topleft: 5px; /* for Mozilla */
2.-webkit-border-top-left-radius: 5px; /* for webkit */
3.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:
1.-moz-box-shadow: 5px 5px 8px #7A7A7A; /* for Mozilla */
2.-webkit-box-shadow: 5px 5px 8px #7A7A7A; /* for webkit */
3.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 :(
misoblog.net
Được sửa bởi DUCVINH83 trên diễn đàn 26/09/2011 lúc 4:03 chiều
__________________
YM: DUCVINH83
0912 822334
|
9ecva.com - 9e Chu Van An Forever : Templates
Chủ đề: Border-radius và box-shadow trong CSS3
