时间戳

首页 > 解决方案 > 如何旋转盒子阴影？

html - 如何旋转盒子阴影？

问题描述

如何旋转盒子阴影？

我目前有这个：

#gradients {
  width: 52px;
  display: block;
  height: 30px;
  background: #22b14c;
  box-shadow: #b5e61d 52px 0px 0px 0px, 
              #fff200 104px 0px 0px 0px, 
              #ffc90e 156px 0px 0px 0px, 
              #ff7f27 208px 0px 0px 0px, 
              #ed1c24 260px 0px 0px 0px;
}
<div id="gradients"></div>

但我想要的输出是让它旋转90度。

标签： htmlcss

解决方案

您可以使用transform属性和使用rotate(90deg)

#gradients {
  transform: rotate(90deg);
  width: 52px;
  display: block;
  height: 30px;
  background: #22b14c;
  box-shadow: #b5e61d 52px 0px 0px 0px, #fff200 104px 0px 0px 0px, #ffc90e 156px 0px 0px 0px, #ff7f27 208px 0px 0px 0px, #ed1c24 260px 0px 0px 0px;
}
<div id="gradients"></div>

推荐阅读