DIỄN ĐÀN TRƯỜNG TRUNG HỌC PHỔ THÔNG HÙNG VƯƠNG PHÚ THỌ
Chào Mừng các bạn đến với diễn đàn trường THPT Hùng Vương
Chúc các bạn có những giây phút vui vẻ trên diễn đàn!
Bạn có thể truy cập vào forum bằng link sau: http://adf.ly/1jn67G

DIỄN ĐÀN TRƯỜNG TRUNG HỌC PHỔ THÔNG HÙNG VƯƠNG PHÚ THỌ
 
Trang ChínhCalendarTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập

Share | 
 

 Thiết Kế Web

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
vithitoan



Giới tính : Nữ
Cung : Cung Sư Tử
Con giáp : Dậu
Tổng số bài gửi : 2
Điểm : 2062
Sinh nhật : 21/08/1993
Ngày tham gia : 30/03/2012
Tuổi : 24
Đến từ Đến từ : K5, Đông Thành, Thanh Ba, Phú Thọ
Công việc/Sở thích : Sinh Viên
Hài hước Hài hước : "Dân IT khô khan lắm! :(" - Khô à, khô thì chan canh, cứ ăn không vậy bảo sao kêu khô. =]]]
Châm ngôn sống : "Sống đơn giản cho đời thanh thản... nghĩ ít đi một tý thì sẽ tốt hơn

Bài gửiTiêu đề: Thiết Kế Web   2/4/2012, 11:06 am

Hướng dẫn bo góc và đổ bóng cho thẻ DIV dùng CSS Để hỗ trợ cho trình bày trên các trang web, thông thường chúng ta thấy có 2 phương pháp chính hay được sử dụng:

+ Sử dụng thuần css.

+ Sử dụng CSS hỗ trợ với hình ảnh.

Tuy nhiên, mỗi phương pháp có ưu và nhược điểm khác nhau. Nếu sử dụng thuần css thì đôi khi trang web của bạn hiển thị tốt trên trình duyệt này nhưng lại gặp không ít khó khăn khi người dùng sử dụng trình duyệt khác (IE là 1 minh chứng trong các phiên bản IE.6 IE.7). Trong khi đó viêc sử dụng hình ảnh để hỗ trợ dựa trên nguyên tắc ghép nhiều mảnh hình ảnh vào để tạo ra hiệu ứng trình bày tại 4 góc thường mất thời gian, tốc độ nạp trang chậm (so với phương pháp thuần css). Với kinh nghiệm và vốn hiểu biết của tác giả, trong bài viết này xin giới thiệu với bạn cách bo góc và đổ bóng cho khung dựa vào thẻ DIV bằng cách sử dụng các thuộc tính border-radius và box-shadow của CSS3. Các hiệu ứng bo góc và đổ bóng mờ của CSS3 chỉ áp dụng cho trình duyệt web có hỗ trợ CSS3 như Chrome, Firefox , Safari, Opera , IE 9. 1. Bo góc cho khung DIV với thuộc tính border-radius. Đầu tiên, bạn hãy tạo ra 1 trang html, tiếp theo trong thẻ BODY, bạn tạo 1 khung DIV và đặt ID cho nó theo ý của mình. Trong ví dụ dưới đây, ID tôi sẽ sử dụng là "khung1" Sau đó tại phần mã lệnh css cho khung DIV chúng ta sử dụng thuộc tính border-radius theo cách như sau: border-radius: 15px (thuộc tính css để bo góc cho khung DIV với 4 góc có độ lượn là 15 chấm điểm).

Mội số trình duyệt không nhận dạng được thuộc tính này nhưng nhận dạn được thuộc tính tương đương: -moz-border-radius. (Ví dụ FireFox) Đối với thuộc tính border-radius này có thể 1 vài phiên bản của FireFox không hiểu nên khung DIV sẽ không có hiệu ứng bo, vì vậy để khắc phục tình trạng đó các bạn có thể nhập thêm 1 dòng border-radius khác với 1 vài ký tự đặc biệt sau:

Kết quả cho những dòng css trên sẽ như sau Để bo tròn cho từng góc của khung DIV, các bạn có thể dùng những lệnh mở rộng sau: -border-radius : bo 4 góc. -border-top-left-radius : bo gócphía trên bên tay trái. -border-top-right-radius : bo gócphía trên bên tay phải. -border-bottom-left-radius : bo gócphía dưới bên tay trái. -border-bottom-right-radius : bo gócphía dưới bên tay phải. Đối với trình duyệt FireFox : -moz-border-radius : bo 4 góc. -moz-border-radius-topleft : bo góc phía trên bên tay trái. -moz-border-radius-topright : bo góc phía trên bên tay phải. -moz-border-radius-bottomleft : bo góc phía dưới bên tay trái. -moz-border-radius-bottomright : bo góc phía dưới bên tay phải. 2. Đổ bóng cho khung DIV với thuộc tính box-shadow. Đối với khung DIV, CSS3 hỗ trợ hiệu ứng bóng mờ với thuộc tính box-shadow. Thuộc tính box-shadow nhận vào 4 tham số. Tham số thứ 1 : kích thước của bóng mờ ở vị trí bên phải của khung div, nếu mà bạn muốn bóng mờ ở vị trí bên trái thì thêm dấu trừ vào trước tham số (như ví dụ : -5px). Tham số thứ 2 : kích thước của bóng mờ ở vị trí phía dưới của khung div, nếu mà bạn muốn vị trí của bóng mờ nằm phía trên khung DIV thì chỉ cần thêm dấu trừ vào trước tham số (như ví dụ : -3px) Tham số thứ 3 : là độ nhòe của bóng mờ, tham số truyền vào này càng cao thì độ nhòe của bóng càng cao. Tham số 4 : màu của bóng. Chỉ cần đặt thêm thuộc tính inset trước các tham số của thuộc tính box-shadow, thì vị trí của bóng mờ sẽ hiển thị vào bên trong khung DIV. Lưu ý : Để hiệu ứng có thể chạy trên Firefox và Safari, các bạn cần truyền thêm phía trước thuộc tính box-shadow. FireFox : -moz-box-shadow : 5px 3px 5px #ccc; Safari : -webkit-box-shadow: 5px 3px 5px #ccc;

Sưu tầm. "Tuy cái này đã cũ nhưng vẫn rất có ích cho nhiều người"
Về Đầu Trang Go down
http://toanvtph01010.co.cc
 
Thiết Kế Web
Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
DIỄN ĐÀN TRƯỜNG TRUNG HỌC PHỔ THÔNG HÙNG VƯƠNG PHÚ THỌ :: NHỊP SỐNG HÙNG VƯƠNG :: Làm quen - Giao lưu & gặp gỡ :: Hội đồng hương-
Chuyển đến 
© 2017 Love|yDK
Trang Web Hiển Thị Tốt Nhất Trên Trình Duyệt MozillaFireFox, Opera và Google Chrome
Phát Triển Bởi: Hoàng Trọng Dũng
Bản Quyền Thuộc Về: © Love|yDK
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Create your own blog

fai