CSS3 Box-Shadow Linear Gradient?

Question

Có cách nào trong CSS3 để tạo ra một bóng chéo trình duyệt (tức là: Mozilla, Webkit, và Opera) inset bóng hộp sẽ chuyển đổi từ màu đen trên đầu trang trắng ở phía dưới? Cách gần nhất mà tôi đã tìm thấy để làm điều này chỉ cho phép bên ngoài của bóng tối là một màu, sau đó chuyển sang màu khác ở bên trong, trên trang này: http://www.css3.info/preview/box-shadow/

Answer 1

Thật không may, điều này là không thể. Tôi đề nghị chỉ sử dụng một div với một background-image mà bạn tạo trên Photoshop hoặc tương tự như vậy.

Answer 2

Hãy xem this video by Lea Verou. Phần tôi liên kết với các cuộc đàm phán về một cái gì đó rất giống nhau, nơi bạn sử dụng gradient hình nền để làm một cái gì đó giống như một bóng bóng. Nếu tôi có thể tìm ra một ví dụ làm việc tốt, tôi sẽ đăng câu trả lời, nhưng điều này sẽ cho bạn một nơi tốt để bắt đầu. Bạn cũng có thể thực hiện một số công cụ thực sự thú vị, chẳng hạn như box shadow curl với lớp giả :after để tạo bóng xuất hiện.

Dưới đây là một vài ví dụ đơn giản ở đầu và cuối hộp, và gạch dưới một số văn bản. Bạn sẽ phải chơi xung quanh với nó (rất nhiều, có thể) để làm cho nó trông như thế nào bạn muốn, nhưng css có một số tính năng thực sự tuyệt vời (và sẽ có nhiều hơn và nhiều hơn nữa).

body { 
 
    display: flex; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    
 
    background: 
 
    radial-gradient(at 50% 0, black, transparent 70%), 
 
    linear-gradient(0deg, black, transparent 50%) bottom; 
 
    background-size: 100% 15px; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.underline { 
 
    width: 6em; 
 
    text-align:center; 
 
    font-size:30px; 
 
} 
 

 
.underline:after { 
 
    content: '\00a0'; 
 
    background-image: 
 
     radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%); 
 
    background-size: 100% 2px; 
 
    background-repeat: no-repeat; 
 
    float:left; 
 
    width:100%; 
 
}

<div class="container"> 
 
    <div class="underline">Hello, world!</div> 
 
</div>

Answer 3

Cố gắng sử dụng một: trước yếu tố để thiết lập một 'bóng' lên.

.classname { 
    &:before { 
     content: ''; 
     position: absolute; 
     display: none; 
     top: -20px; 
     left: -20px; 
     right: -20px; 
     bottom: -20px; 
     z-index: -1; 
     background: linear-gradient(to bottom, red, blue); 


    } 

    &:hover { 
     &:before { 
     display: inline-block; 
     } 
    } 
    } 

Mã trên đây là ví dụ về cách thiết lập hiệu ứng di chuột.