如何獲得的box-shadow只左右只用css

-3

div { 
 
    -webkit-box-shadow: 0px 0px 10px #000; 
 
    -moz-box-shadow: 0px 0px 10px #000; 
 
    box-shadow: 0px 0px 10px #000; 
 
}

<div>abc</div>

我需要的是這個，，這是可能的使用背景圖像，但我想用CSS來做到這一點。

這裏是原始圖像：

謝謝

來源

2016-12-30 Prasanga

的[如何獲得對左右兩側的box-shadow只（可能的複製http://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on - 左 - 右 - 僅） – aavrug

在這裏我已附加圖像我想要的最後我得到一個想法如何做這個盒子陰影根據上面的答案。 – Prasanga

你的形象只是23px？ –

@Prasanga請找到下面的代碼按您的要求。

div { 
 
    box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8); 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 50px; 
 
    background: white; 
 
}

<div></div>

來源

2016-12-30 07:05:42 sanjay

謝謝你的回答。 – Prasanga

@Prasanga歡迎您，如果您滿意，請對答案進行投票。 – sanjay

你也可以試試這個---

div { 
 
     width: 300px; 
 
     height: 100px; 
 
     background-color: yellow; 
 
    box-shadow:0px 15px 0px 0px white,0px -15px 0px 0px white, 5px 0px 8px #444,-5px 0px 8px #444; 
 
    }

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

來源

2016-12-30 09:14:04

很簡單，在這裏：

div{ 
     background: white; 
     box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black; 
    }

<div>abc</div>

來源

2016-12-30 09:40:34 Teshtek

如何獲得的box-shadow只左右只用css

回答

相關問題