我正在尝试创建一个这样的框。我正在使用 box-shadow 属性。 我试过歪了但是整个盒子都歪了
我想让阴影对 Angular 线连接到盒子。我不会将盒子的阴影对 Angular 线连接到盒子。请给我建议。
#one {
width: 400px;
height: 200px;
background-color: yellow;
box-shadow: -10px 10px black;
margin: 10% 0 10% 10%;
transform: rotate(1.5deg) translateX(10px) translateY(15px) skewX(4deg) skewY(-4deg);
}<body>
<div id="one">
</div>
</body>最佳答案
您不需要使用任何转换方法来实现此目的。你所要做的就是使用 box-shadow
这是box-shadow的结构
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
您应该在哪里更改[horizontal offset] 和[vertical offset]
这是你应该怎么做
PS:进行适当的调整，直到获得所需的输出。
.box {
width: 300px;
margin: 50px auto;
height: 100px;
background: red;
box-shadow: -1px 0px 0px #000, -0px 1px 0px #000, -2px 1px 0px #000, -1px 2px 0px #000, -3px 2px 0px #000, -2px 3px 0px #000, -4px 3px 0px #000, -3px 4px 0px #000, -5px 4px 0px #000, -4px 5px 0px #000, -6px 5px 0px #000, -5px 6px 0px #000, -7px 6px 0px #000, -6px 7px 0px #000, -8px 7px 0px #000, -7px 8px 0px #000, -9px 8px 0px #000, -8px 9px 0px #000, -10px 9px 0px #000, -9px 10px 0px #000, -11px 10px 0px #000, -10px 11px 0px #000, -12px 11px 0px #000, -11px 12px 0px #000, -13px 12px 0px #000, -12px 13px 0px #000, -14px 13px 0px #000, -13px 14px 0px #000, -15px 14px 0px #000, -14px 15px 0px #000, -16px 15px 0px #000, -15px 16px 0px #000, -17px 16px 0px #000, -16px 17px 0px #000, -18px 17px 0px #000, -17px 18px 0px #000, -19px 18px 0px #000, -18px 19px 0px #000, -20px 19px 0px #000, -19px 20px 0px #000, -21px 20px 0px #000, -20px 21px 0px #000, -22px 21px 0px #000, -21px 22px 0px #000, -23px 22px 0px #000, -22px 23px 0px #000, -24px 23px 0px #000, -23px 24px 0px #000, -25px 24px 0px #000, -24px 25px 0px #000, -26px 25px 0px #000, -25px 26px 0px #000, -27px 26px 0px #000, -26px 27px 0px #000, -28px 27px 0px #000, -27px 28px 0px #000, -29px 28px 0px #000, -28px 29px 0px #000, -30px 29px 0px #000, -29px 30px 0px #000;
}<div class="box"></div>关于html - 如何对 Angular 连接盒子的阴影？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34390240/