CSS3箱子影子尺寸按百分比

是否可以通過百分比設置箱子影子尺寸和偏移量？我目前使用這樣一類的，但變焦式改變其大小和距離：CSS3箱子影子尺寸按百分比

.shadowright 
    { 
     -webkit-box-shadow: 5px 5px 10px #454545; 
     -moz-box-shadow: 5px 5px 10px #454545; 
     -o-box-shadow: 5px 5px 10px #454545; 
     box-shadow: 5px 5px 10px #454545;    
    }

來源

2014-07-08 iSofia

我不明白你在問什麼，如果你放大它放大一切，你會想要發生什麼？ – Banana

hmmm ..從來沒有嘗試過使用百分比來做到這一點。您是否嘗試過使用媒體查詢？ –

放大對我來說似乎沒有任何奇怪的地方。它只是像所有其他事物一樣擴展。 – ajp15243

號作爲每W3C Specification：

計算值：任何<length>製成絕對;任何指定的顏色計算;否則如指定

強調我的。相對值（百分比）不起作用。

來源

2014-07-08 19:08:48 TylerH

EM不是相對單位嗎？ – iSofia

@iSofia好問題。簡答：不。長的回答：'EM'是可擴展的，但它在相同意義上不是相對的。「EM」固定爲當前字體大小。如果更改字體大小，則會重新聲明EM。根據定義，百分比總是與其他事物相關，並且不能獨立存在。相反，'1em'默認等於'12px'（font-size）。換句話說，'EM'是一個變量。 – TylerH

你是對的;謝謝你的回答。它的作用是因爲JavaScript函數在客戶區域重新調整大小時重新調整字體的大小。儘管如此，仍然可以接受。 – iSofia

爲了我想到的更好的解決方案，Google正在尋找一個可能的解決方案。

.shadowright 
{ 
    width: 20%; 
    font-size: 20vw; // if you want the box-shadow to equal it's width 
    box-shadow: 1em 1em 1em red; 
}

來源

2017-10-17 17:48:47 Lemnis

我誤解了什麼嗎？我知道你的情況下box-shadow是20vw的偏移量，但20vw不等於20％。你爲什麼說「如果你想要盒子的陰影等於它的寬度」？順便說一句，我認爲，原來的@iSofia問題，只要將em分配給box-shadow，假設他或她希望它是「相對於字體大小」就是正確的。 – Eric

CSS3箱子影子尺寸按百分比

回答

相關問題