CSS shadow，我可以放一個百分比單位嗎？

我正在嘗試僅使用CSS製作動畫按鈕。我在前後使用僞元素和box-shadow元素。CSS shadow，我可以放一個百分比單位嗎？

這裏的的jsfiddle：http://jsfiddle.net/fbohd7ko/

的問題是框陰影不接受百分比爲單位，我不得不使用像素，但如果我想使這個效果的普遍影響，我不能像素。看到jsfiddle，我計算出適合第一個按鈕的方塊陰影，但下一個邊框不適合。

我可以做類似：box-shadow:-100% 0 #fff？

謝謝！（對不起，我的英語）

2015-08-17 seergiue

顯然不行，你不能：HTTPS： //developer.mozilla.org/en-US/docs/Web/CSS/box-shadow –

首先了解盒子陰影，通過https://developer.mozilla.org/en-US/docs/Web/CSS/box -shadow＆https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Box-shadow_generator –

@GLP An d我應該怎樣做才能使這種效應具有普遍效應？（我的意思是，按鈕的寬度不應該是有效的） – seergiue

這裏是要生成的效果

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Roboto', sans-serif; 
 
    background: steelblue; 
 
} 
 
.item { 
 
    position: relative; 
 
    background: #336084; 
 
    padding: 8px 30px; 
 
    line-height: 50px; 
 
    color: #fff; 
 
    margin: 10px; 
 
    position: relative; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
.from-right:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 3px; 
 
    top: 0; 
 
    left: 100%; 
 
    background: #fff; 
 
    transition: all .3s; 
 
    opacity: 0; 
 
} 
 
.from-right:hover::before { 
 
    opacity: 1; 
 
    left: 0; 
 
} 
 

 
.from-left:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 3px; 
 
    top: 0; 
 
    right: 100%; 
 
    background: #fff; 
 
    transition: all .3s; 
 
    opacity: 0; 
 
} 
 
.from-left:hover::before { 
 
    opacity: 1; 
 
    right: 0; 
 
}

<div class="item from-right">From Right</div> 
 
<div class="item from-right">From Right Largest text</div> 
 

 
<div class="item from-left">From Left</div> 
 
<div class="item from-left">From Left Largest text</div>

來源

2015-08-17 11:51:46 Suresh

非常感謝！ :) – seergiue

這個怎麼樣？ http://jsfiddle.net/62bbrcdr/在這裏我需要使用box-shadow來創建另一個邊框效果。有一個替代盒子陰影？再次感謝！ – seergiue

@seergiue嘗試此鏈接http://jsfiddle.net/62bbrcdr/1/ – Suresh

而不是改變boxshadow值%,您可以更改left and right values in %。 Asfar酒店我想是這樣的：Demo只是爲了展示如何你可以開始..

.border-from-right::before { 
    content: ""; 
    display:block; 
    background:#336084; 
    height:100%; 
    position:absolute; 
    right:0; 
    top:0; 
    left:100%; 
    transition:all .3s; 
    width:3px; 
    box-shadow:3px 0 #336084;  

} 

.border-from-right:hover::before { 
    box-shadow:3px 0 #fff; 
    left:0px; 
}

而且你不能使用箱陰影值％。欲瞭解更多信息請參閱本Link ..希望這有助於你:)

來源

2015-08-17 11:27:13

這個怎麼樣？ http://jsfiddle.net/62bbrcdr/在這裏我需要使用box-shadow來創建另一個邊框效果。有一個替代盒子陰影？謝謝！ – seergiue

CSS shadow，我可以放一個百分比單位嗎？

回答

相關問題