2012-08-14 33 views
10

Tôi đang cố gắng đạt được điều gì đó mà tôi thậm chí không chắc chắn là có thể ở đây.calc() 100% + #px

Tôi đang cố gắng đặt một hình ảnh PNG đổ bóng cụ thể dưới điều hướng cho trang web của tôi. Tuy nhiên tôi cũng muốn sử dụng lại khả năng này cho bất kỳ đối tượng nào tôi muốn trên trang web, có thể là hình ảnh, nút div hoặc nút. Về cơ bản sử dụng cùng một hình ảnh bóng cho bất kỳ đối tượng nào.

Sử dụng css3 calc() chức năng Tôi đang cố gắng làm chiều cao của đối tượng @ 100% + 25px (chiều cao của png).

Tôi đã thử phong cách:

height: -webkit-calc(100% + 25px); 
height: -moz-calc(100% + 25px); 
height:  -o-calc(100% + 25px); 

Nhưng từ những gì tôi có thể thu thập trong Firebug 100% + 25px là sau đó mới 100% như thế này đạt được gì cả.

Tôi cũng đã cố gắng:

height: -webkit-calc(100% + 25px); 
height: -moz-calc(100% + 25px); 
height:  -o-calc(100% + 25px); 
background-position: 0 -moz-calc(100% + 25px); 

Nhưng không có niềm vui ở đây cả.

Nếu tôi sử dụng calc (3em + 25px); nó hoạt động không có vấn đề, nhưng điều này không đủ linh hoạt để làm việc trên bất kỳ đối tượng nào.

Điều này có thể thực hiện được không? Tôi thậm chí còn có ý nghĩa ?!

+0

'-moz-box-shadow: 0 0 30px 5px # 999; -webkit-box-shadow: 0 0 30px 5px # 999; ' Điều đó sẽ không hoạt động tốt hơn? – TheGeekZn

+0

Cảm ơn rất nhiều, tuy nhiên đây là một hình ảnh cụ thể tôi đang sử dụng cho một bóng thả cong. Tôi đã thực hiện hộp bóng như là một tài sản CSS, tuy nhiên nó không hoàn toàn là hiệu ứng tôi sau. – user1597713

+0

Nếu tôi hiểu đúng, hãy sử dụng 'bán kính đường viền trên cùng bên trái: 20px 20px; border-top-right-radius: 20px 20px; ' để tạo góc cong. Cái bóng sẽ theo sau đó. – TheGeekZn

Trả lời

9

Tôi không chắc chắn 100% nhưng số working draft mô tả rằng các toán tử ở cả hai mặt của biểu mẫu tính toán là biểu thức phụ (của một kiểu đơn).

Vì bạn đang kết hợp giá trị tương đối (%) với giá trị tuyệt đối (px), nó có thể không hoàn thành được phép tính.

Cập nhật: Tôi đã làm một thử nghiệm nhỏ và có vẻ như quá tốt. Bạn có chắc chắn các công cụ chọn và vị trí của bạn trong html là chính xác không? Kiểm tra điều này Fiddle.

+1

Hoàn hảo! Cảm ơn rất nhiều Damien! Bằng cách đặt div bóng trong phần tử Nav ​​và cho phần tử Nav ​​có chiều cao cố định, bóng sẽ hiển thị hoàn hảo ở phía dưới. Một vài vụ đụng độ lề ngắn để phân loại nhưng điều này đã thực sự rất hiệu quả! Rất rất cảm ơn! – user1597713

+2

Chỉ để chỉ ra. Thử nghiệm% đối với px là thiếu sót, với thực tế là bạn đang sử dụng chiều cao 100px ở vị trí đầu tiên, vì 100% + 25% giống như 100% + 25px. Một thử nghiệm chính xác sẽ sử dụng chiều cao ban đầu của một cái gì đó khác hơn 100px. Điều đó nói rằng, thay đổi chiều cao trong fiddle đến 300px không chứng minh rằng thử nghiệm không hoạt động như mong đợi. – TobyG

+0

như trên, vấn đề xảy ra ở đây là nó sẽ tự động chọn phép đo tham số đầu tiên, vì vậy trong trường hợp này nó đang chạy (100% + 25px = 125px), kết quả tương tự như 100% + 25px . Nó chỉ là một sự trùng hợp mà họ đến cùng một kết quả, ở độ cao khác nhau nó sẽ không hoạt động – MintWelsh

Các vấn đề liên quan