CSS阴影，百分比单位可以使用吗？

Question

我正在尝试只使用CSS制作动画按钮。我使用伪元素:before和:after以及box-shadow元素。

这是jsfiddle链接：http://jsfiddle.net/fbohd7ko/ 问题在于box-shadow不接受百分比单位，我必须使用像素，但如果我想使此效果成为通用效果，我不能使用像素。请参见jsfiddle，我计算了box-shadow以适应第一个按钮，但下一个按钮的边框不正确。

我能做类似于box-shadow:-100% 0 #fff这样的事情吗？

谢谢！（对我的英语很抱歉）

- seergiue

---

显然不行，您不能这样做：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow - José Luis

先了解盒子阴影，可以参考以下链接：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow 和 https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Box-shadow_generator - G.L.P

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - seergiue

你的问题的答案是否定的，因此迄今为止的每个答案都是不必要的。你想知道如何完成相同的事情吗？ - Rob

Answer 1

这是你想要生成的效果。

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>

- Suresh Karia

---

这个怎么样？http://jsfiddle.net/62bbrcdr/ 在这里，我需要使用box-shadow来创建另一种边框效果。有没有box-shadow的替代方案？再次感谢！ - seergiue

你太厉害了！谢谢 :) - seergiue

Answer 2

不要改变boxshadow值的%，而是可以改变左右值的%。我尝试过这样做：演示只是为了展示如何开始。

.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; 
}

你不能使用盒子阴影的%值。了解更多信息，请参考此处链接。希望这能帮到你 :)

- G.L.P

---

这个怎么样？http://jsfiddle.net/62bbrcdr/ 在这里，我需要使用box-shadow来创建另一种边框效果。有没有box-shadow的替代方案？谢谢！ - seergiue