邊框陰影

我有這個問題，我想要一個邊框和一個陰影，但陰影必須超過邊界。邊框陰影

box-shadow屬性在邊框結束時開始，是否可以將其移到邊框上？

.border 
{  
    border: solid rgba(128,42,42,.98) 16px; 
} 


.img-box-shadow 
{ 
    -moz-box-shadow: 0px 0px 20px #000000; 
    -webkit-box-shadow: 0px 0px 20px #000000; 
    box-shadow: 0px 0px 20px #000000; 
}

我的HTML：

<img class="border img-box-shadow" src="img.png">

早在我的盒子陰影試圖插入，但沒有奏效！

我在尋找這樣的效果：

border

而且我得到這個結果：

shadow in border

來源

2014-02-20 Mandi

你想爲最外層容器的內部陰影？ –

這是相同的容器，如果你可以在這裏看看我的圖片http://imgur.com/JHnbwTy你會發現盒子陰影開始於邊界結束的地方，我希望它們都從圖像結束的地方開始。 – Mandi

這是最可愛的女孩看着css – JakeParis

我認爲這將有兩個重疊框的陰影更容易被實現

東西like this接近w你正在尋找的帽子

box-shadow: 0 0 20px 5px #000000, 
    0 0 0 16px rgba(128,42,42,.98);

來源

2014-02-20 05:05:23

謝謝你！完美地工作！ – Mandi

@PabloPerez這是我的榮幸！這（間接地）啓發了我創造一種新的圖像揭示技術（你可能會[看看]），明天會有更多的版本。現在！ –

非常好的人，我真的喜歡他們!!!晚安！我很高興我也能「幫助」你。 – Mandi

您可以嘗試使用插圖，然後降低的Alpha值你的邊界。它可能不完全是你想要的，但它很接近。

.border 
{  
    border: solid rgba(128,42,42,.5) 4px; 
} 


.img-box-shadow 
{ 
    -moz-box-shadow: inset 0px 0px 20px #000000; 
    -webkit-box-shadow: inset 0px 0px 20px #000000; 
    box-shadow: inset 0px 0px 20px #000000; 
}

備用選項（從this question借用）。不要使用.border，只是用這個（你可以玩的像素值）：

.img-box-shadow 
    { 
     box-shadow: rgba(0,0,0,.98) 0px 0px 3px, inset rgba(0,0,0,.98) 0px -2px 3px; 
    }

這裏有一個JSFiddle

來源

2014-02-20 04:13:22 JLewkovich

這些都不會造成我真正想要的效果，我正在尋找像這樣的東西：http://imgur.com/BBcraBt – Mandi

看起來像你想的inset箱的影子，那麼你可以使用：

box-shadow: inset 0 -15px 10px -10px #444; 
-moz-box-shadow: inset 0 -15px 10px -10px #444; 
-webkit-box-shadow: inset 0 -15px 10px -10px #444;

Fiddle Demo

來源

2014-02-20 04:13:27 Felix

這件怎麼樣？

.ds-bottom { 
    position:relative; 
    overflow:hidden; 
    border-bottom:1px solid #ddd; 
} 
.ds-bottom:before { 
    content: ""; 
    position:absolute; 
    z-index: 1; 
    width:96%; 
    bottom: -10px; 
    height: 10px; 
    left: 2%; 
    border-radius: 100px/5px; 
    box-shadow:0 0 18px rgba(0,0,0,0.6); 
}

來源

2014-02-20 04:20:27 fxdavidd

首先，您在框陰影格式中出錯。

box-shadow: 0px 0px 20px #000000;

更改爲

box-shadow: 0px 0px 20px 0 #000000;

由於箱陰影屬性的正確格式

的box-shadow：水平長度的垂直長度模糊半徑的電子數據半徑;

接下來，要使它與您的要求一起工作，您必須將您的圖像包裝在div中。 Box-shadow不會在邊框上工作。

這裏的風格

div { 
    display:inline-block; 
    padding:4px; /* Act as border width */ 
    background:rgba(128,42,42,.98); /* Act as border color */ 
} 

.img-box-shadow 
{ 
    box-shadow: inset 0px 0px 20px 0 #000000; 
    -webkit-box-shadow: inset 0px 0px 20px 0 #000000; 
    -moz-box-shadow: inset 0px 0px 20px 0 #000000; 
}

和HTML標記

<div class="img-box-shadow"> 
<img src="http://graph.facebook.com/715380382/picture?type=large"> 
</div>

檢查現場演示http://jsbin.com/hex/1/edit

來源

2014-02-20 04:55:57 cutez7boyz

回答

相關問題