僅限於角落的圓角陰影

我想讓陰影僅出現在圓角的圓角處。但是盒子的影子出現在兩側。我想要如下圖所示的東西。僅限於角落的圓角陰影

HTML：

<div class="img"> 
    <img src="http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png" alt=""/> 
</div>

CSS：

img { 
    -webkit-box-shadow: 0 15px 10px #777; 
    -moz-box-shadow: 0 15px 10px #777; 
    box-shadow: 0 15px 10px #777; 
}

來源

2016-04-21 Nag

看起來你必須使用'border-image'來實現這一點。祝你好運！ – John

您可以將圖片保存爲帶有該陰影的PNG或使用html，您必須將4個方格絕對放置在圖像角落，併爲它們應用方塊陰影 – sTx

不知道在哪裏，但我看到過去用過的相同的東西，一個svg。我認爲它被用作包含該照片的div的背景圖像。 – enhzflep

-1

您可以使用24bit transparency創建一個PNG文件或使用CSS代碼，因爲它遵循：

div{ 
 
    width: 300px; 
 
    position:relative; 
 
    } 
 

 
#corner1 
 
{ 
 
    background:red; 
 
    width:50px; 
 
    height:10px; 
 
    box-shadow: 0px 0px 20px black; 
 
    position:absolute; 
 
    z-index:-1; 
 
    top:0px; 
 
}

<div class="img"> 
 
    <img src="http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png" alt=""/> 
 
    <div id="corner1"></div> 
 

 
</div>

正如您所見，您可以通過複製內部#cornerN div來簡單地隱藏圖像後面的不同div。當然在你的情況下，父div將是容器元素（雲圖）。

最後，請注意在各種瀏覽器中工作的方塊陰影屬性：通過重新設置-webkit前綴來使用屬性「box-shadow」。

來源

2016-04-21 07:49:28 LoreV

不完全，但你的問題可以通過其解決。

HTML

<div class="shadow"> 
    <div class="img"> 
    <img src="http://placehold.it/250x300" alt="" /> 
    </div> 
</div>

CSS

*{ 
box-sizing: border-box; 
} 
.shadow { 
    width: 250px; 
    height: 300px; 
    position: relative; 
    margin: auto; 
} 

.img { 
    padding: 15px; 
    background: #fff; 
} 

img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

.shadow { 
    position: relative; 
} 

.shadow:after, 
.shadow:before, 
.img:after, 
.img:before{ 
    content: ""; 
    width: 50px; 
    height: 50px; 
    box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.6); 
    position: absolute; 
    z-index: -1; 
} 

.shadow:before, 
.shadow:after{ 
    top: 0; 
} 
.img:before, .img:after { 
    bottom: 6px; 
} 
.shadow:before{ 
    left: 0; 
} 
.shadow:after { 
    right: 0; 
} 
.img:before { 
    left: 0; 
} 

.img:after { 
    right: 0; 
}

見Fiddle

來源

2016-04-21 08:21:31

你可以做的是建立一個您要顯示.IMG元素下2僞元素。通過在這兩個方向旋轉45deg它們你就會有兩條對角線的長方形，然後把這些箱子的影子，讓您的結果

body { 
 
    background: #eee; 
 
    } 
 
.img { 
 
    position: relative; 
 
    padding: 10px; 
 
    background: white; 
 
    display: inline-block; 
 
} 
 
.img:before, 
 
.img:after{ 
 
    display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 138%; 
 
    height: 60px; 
 
    z-index: -1; 
 
    box-shadow: 0 0 20px rgba(0,0,0,0.8); 
 
    border-radius: 100%; 
 
    transform: translate(-50%, -50%) rotate(45deg); 
 
} 
 
.img:after{ 
 
    transform: translate(-50%, -50%) rotate(-45deg); 
 
}

<div class="img"> 
 
    <img src="http://idav.ucdavis.edu/~okreylos/ResDev/SplineApproximation/Examples/Lena3200G.gif" /> 
 
</div>

的138％的寬度略小於正方形的對角線的長度。這將需要對矩形進行調整。

來源

2016-04-21 09:11:37

僅限於角落的圓角陰影

回答

相關問題