Bóng bên trong một div

Có thể hiển thị bóng bên trong hộp div không sử dụng ảnh không? Thay vào đó, tôi muốn sử dụng lệnh css.Bóng bên trong một div

Vì vậy, có một số lệnh như: -webkit-box-shadow: 1px inset;?

Nguồn

2012-03-12 Tim Dau

Họ thực sự sử dụng hình ảnh trong trang web tumblr, hai hình ảnh để được chính xác. Một hình ảnh bóng cho chiều rộng toàn trang và hình ảnh bóng tối rộng hơn ở giữa trang. – Joonas

trong CSS3 theres box-shadow mà cũng có thể được inset để làm chính xác những gì bạn cần. này được hỗ trợ bởi các trình duyệt sau:

chrome> = 10,0 (> = 4.0 với -webkit -prefix)
firefox> = 4.0 (> = 3,5 với -moz -prefix)
IE> = 9.0
opera> = 10,5
Safari> = 5.1 (> = 5.0 với -webkit -prefix)

Nguồn

2012-03-12 10:39:57 oezi

-webkit-box-shadow: inset 0 2em 3em -1em màu xanh lục; đã giải quyết. Cảm ơn :) –

bạn được chào đón. hãy nhớ chấp nhận câu trả lời đã giải quyết được vấn đề của bạn bằng cách nhấp vào dấu tích ở bên trái của nó. – oezi

Yup có một lệnh inset. như thế này:

-webkit-box-shadow: 0 0 1px 3px #000 inset; 
-moz-box-shadow: 0 0 1px 3px #000 inset; 
box-shadow: 0 0 1px 3px #000 inset;

Bạn có thể tạo ra từ đây http://css3generator.com/

Nguồn

2012-03-12 10:40:50 sandeep

+1 cho cssgenerator, ;-) – raffian

Làm nổi bật mã StackOverflow dường như nghĩ rằng 'inset' là một phần của chú thích' # 000 inset' ** ..... ** – Druzion

Bạn có thể sử dụng Hộp shadow generator cho các hiệu ứng bóng. Tôi sẽ đưa ra một ví dụ để cho thấy cách sử dụng bộ tạo bóng hộp.

Bước 1: Đến: Box Shadow Generator

Bước 2: điều chỉnh thuộc tính bóng mà bạn muốn thêm vào.

Bước 3: Sau đó sao chép mã css bằng cách sử dụng nút "sao chép văn bản".

bước 4: Sau đó, bạn có thể nhập mã css vào tệp định kiểu.

Làm như thế này.

<html> 
<head> 
    <title>Title</title> 
    <style type="text/css"> 
    #banner{ 

     position: absolute; 
     width: 100%; 
     height: 150px; 
     background-color: #4E6C88; 
     -webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75); 
     -moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75); 
     box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75); 
    } 

    </style> 
</head> 
<body> 
<div id="banner">  

</div> 
</body> 
</html>

Cảm ơn bạn ...;)

Nguồn

2015-03-19 06:03:26

Bóng bên trong một div

Trả lời

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