CSS3箱形陰影線性漸變？

CSS3中是否有創建一個跨瀏覽器（即：Mozilla，Webkit和Opera）插入框陰影的方法，該陰影將從底部的黑色過渡到底部的白色？我發現這樣做的最接近的方式只允許陰影的外部是一種顏色，然後轉換到內部的另一種顏色，在此頁上：http://www.css3.info/preview/box-shadow/CSS3箱形陰影線性漸變？

來源

2012-03-10 Oliver Spryn

我不這麼認爲，沒有 – jacktheripper 2012-03-10 20:07:02

不幸的是，這是不可能的。我建議只使用帶有在Photoshop上創建的背景圖像的div或類似的圖像。

來源

2012-03-10 20:19:56 jacktheripper

好的，沒什麼大不了的。我只希望只使用CSS3，但是由於我發現這是不可能的，我只是略過這個想法。 ;） – 2012-03-10 20:56:36

我不會那麼快就擊倒這個想法。即使你使用div，background-image也可能是一個漸變，瀏覽器在本地代碼中呈現的是漸變，並且不需要下載任何資源。 – redbmk 2013-04-05 16:47:26

正確 - 但這隻會創建一個嵌入的盒子陰影的錯覺。這個問題特別要求如果一個盒子陰影可以給一個漸變，而不是一個純色。 – jacktheripper 2013-04-06 10:52:49

看看this video by Lea Verou。我鏈接到的部分講述了非常相似的東西，在這些東西中，您使用背景圖像漸變來製作類似盒子的陰影。如果我能找出一個好的工作示例，我會發佈一個答案，但這應該給你一個開始的好地方。你也可以做一些非常酷的東西，比如box shadow curl與:after僞類來使陰影出現。

以下是一個框的頂部和底部的幾個簡單示例，並強調了一些文本。你將不得不玩弄它（很多，可能），讓它看起來如何你想要的，但CSS有一些非常真棒功能（並會有越來越多）。

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>

來源

2013-04-05 18:17:44 redbmk

嘗試使用：前元素設定一個 '影子' 了。

.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; 
     } 
    } 
    }

以上代碼是關於如何設置這種懸停效果的示例。

來源

2016-03-23 20:30:33 ink

CSS3箱形陰影線性漸變？

回答

相關問題