CSS3箱子影子大小 - 百分比單位？

我正在研究需要使用CSS3 box-shadow屬性的項目。這很好，但我發現陰影的分散大小不能設置爲父對象的百分比。CSS3箱子影子大小 - 百分比單位？

我完全理解box-shadow不是疊加式的，因此它不會將parent的大小作爲參考。但是考慮到我需要對物體進行流暢的縮放（不僅僅在斷點上），所以這會帶來一個問題 - 我只能以絕對單位（em或px）設置陰影傳播屬性。

有沒有解決這個問題的方法？我想過在容器中使用內部容器（用於內容）（對於「陰影」 - 它沒有模糊），但是這產生了另一個問題 - 內部容器的垂直居中。

任何解決方案？沒有jQuery請，只是純粹的CSS。

感謝

來源

2012-12-27 Jozko Remen

邊界而不是陰影怎麼樣？ – Ana

我會嘗試使用'僞元素' – MMachinegun

em是相對於字體大小。一個訣竅就是讓你的字體縮放。 – Eric

您是否嘗試過使用rem單元（根em單位）？我相信你可以用它來使它流暢地擴展。

rem單元總是相對於根html元素，所以它會相應地縮放，你不必擔心內部容器或類似的東西。它在這一點上也有相當廣泛的瀏覽器支持。

我在我的項目中使用它以使它們更具響應性，但始終遵循已由px或em定義的參數，以便它可以優雅地失敗以防萬一。例如：

font-size: 14px; font-size: 1.4rem;

這裏有您需要了解本機一大篇解釋一切：http://snook.ca/archives/html_and_css/font-size-with-rem

來源

2013-01-02 11:20:19 alex

這不適用於箱形陰影。 – CREE7EN

@ CREE7EN：你一定是在開玩笑或說謊..！ http://jsfiddle.net/4dgaurav/5Sptc/1/ – 4dgaurav

@Gaurav沒有爲我工作，不知道爲什麼。謝謝。 – CREE7EN

你想要的框陰影與容器的寬度或的高度成比例容器？你不能真正指定你的影子的高度和寬度，只有一個點差。因此，如果你的容器縮小10％的寬度，但不收縮高度，那麼你的影子會縮小10％（如果可能的話），即你的影子的高度可能會縮小，即使它不應該。

如果你想讓box-shadow在高度和寬度上正確縮放，你必須創建多個陰影 - 一個用於高度，一個用於寬度。

但是，您將永遠無法縮放實際陰影，只能調整陰影的容器。所以你會在你的主容器中創建一個容器，然後給它一個負邊距並附上盒子陰影。但是，您很快會注意到，當縮放容器時，您的影子實際上會增長而不是縮小。

似乎有點矯枉過正，試圖擴大一些不使用媒體查詢或jQuery而無法擴展的東西。

不過，如果你正在尋找可擴展的邊界，即箱陰影無殘影：P，則沒有進一步看：

http://jsfiddle.net/925r2/3/

<style> 
    * { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     box-sizing: border-box; 
    } 

    .wrapper { 
     position: relative; 
     margin: 100px auto 0; 
     width: 80%;   /* .content width */ 
     height: 400px;  /* .content height */ 
    } 

    .content { 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: #fff; /* .content background */ 
    } 

    .shadow { 
     position: absolute; 
     top: -10%;   /* .content shadow top height */ 
     right: -5%;   /* .content shadow right width */ 
     bottom: -10%;  /* .content shadow bottom height */ 
     left: -5%;   /* .content shadow left width */ 
     background: #000; /* .content shadow, unfortuntely no blur effect */ 
    } 
</style> 

<div class="wrapper"> 
    <div class="shadow"></div> 
    <div class="content">This is your content</div> 
</div>

來源

2014-07-11 22:19:15 Cornelius

這並不回答以百分比爲單位使用'box-shadow'的問題 –

簡單地說，您不能在'box-shadow'上使用百分比。幾乎任何答案都是使用其他容器來達到效果的黑客攻擊。因此，無論是問題應該發佈到W3C和瀏覽器供應商，或者如果海報正在尋找解決方案，這是一個影子的解決方案，基於百分比而沒有模糊效果。 – Cornelius

如果你是一個插圖後box-shadow您可以使用徑向漸變背景來模仿行爲。因此，而不是 -

box-shadow: inset 0 0 100% #000;

你會使用 -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);

支持：FF16 +，IE10 +，Safari瀏覽器5.1+

我找不到在Chrome開始支持該財產的任何明確的答案，但我目前的版本（39.0.2171.65）肯定支持它。

ColorZilla是一個非常有用的工具，用於生成徑向（除其他外）漸變以及必要的前綴，如果您決定沿着這條路線走下去。

來源

2014-11-26 15:48:02 shakyjake

我已經發現，陰影蔓延大小不能設置爲父對象

真正的百分比。但是您可以在父對象上設置font-size，然後在em s中定義對象大小，並使用相同的em s來定義box-shadow的大小。或者，如果您的父對象恰好是窗口，則可以使用viewport units: vw and vh。

來源

2015-11-23 13:03:30 mik01aj

偉大的解決方案（真正的黑客）我用它像這樣：（內聯）font-size =（球半徑/ 10）和class-css box-shadow：插入-2em -5em 5em rgba（0,0,0 ,. 6） – T4NK3R

CSS3箱子影子大小 - 百分比單位？

回答

相關問題