如何才能旋转盒子阴影？
我现在有这个:
null
#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>null
但我想要的输出是将其旋转90度
您可以使用Transform属性和Rotate(90deg)
null
#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>
使用此样式:
transform: rotate(50deg);
只需添加值为rotote(90deg)的transform属性。
null
#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;
transform: rotate(90deg);
}<div id="gradients"></div>