带有圆角的div上的高效CSS3长阴影

Question

我目前在CSS中使用类似于以下内容的代码创建长阴影：

box-shadow: 1px 1px #481111,
2px 2px #491111,
3px 3px #491111,
4px 4px #4a1111,
5px 5px #4a1111,
6px 6px #4b1111,
7px 7px #4b1111,
8px 8px #4c1212,
9px 9px #4c1212,
...
200px 200px #b42b2b;

现在的问题是，通过拥有一个大的长阴影（200px），许多不那么强大的设备，如手机或旧电脑无法处理这些阴影，没有滞后。我正在寻找一种替代这种在线长阴影的方法，但找不到另一种方法。

应用此阴影的元素看起来类似于：

（div的边界半径为5px）

body {
  background-color: #b42b2b
}
.main {
  width: 500px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px #481111, 2px 2px #491111, 3px 3px #491111, 4px 4px #4a1111, 5px 5px #4a1111, 6px 6px #4b1111, 7px 7px #4b1111, 8px 8px #4c1212, 9px 9px #4c1212, 10px 10px #4d1212, 11px 11px #4d1212, 12px 12px #4e1212, 13px 13px #4f1212, 14px 14px #4f1212, 15px 15px #501212, 16px 16px #501313, 17px 17px #511313, 18px 18px #511313, 19px 19px #521313, 20px 20px #521313, 21px 21px #531313, 22px 22px #531313, 23px 23px #541313, 24px 24px #541414, 25px 25px #551414, 26px 26px #561414, 27px 27px #561414, 28px 28px #571414, 29px 29px #571414, 30px 30px #581414, 31px 31px #581515, 32px 32px #591515, 33px 33px #591515, 34px 34px #5a1515, 35px 35px #5a1515, 36px 36px #5b1515, 37px 37px #5b1515, 38px 38px #5c1515, 39px 39px #5d1616, 40px 40px #5d1616, 41px 41px #5e1616, 42px 42px #5e1616, 43px 43px #5f1616, 44px 44px #5f1616, 45px 45px #601616, 46px 46px #601616, 47px 47px #611717, 48px 48px #611717, 49px 49px #621717, 50px 50px #631717, 51px 51px #631717, 52px 52px #641717, 53px 53px #641717, 54px 54px #651818, 55px 55px #651818, 56px 56px #661818, 57px 57px #661818, 58px 58px #671818, 59px 59px #671818, 60px 60px #681818, 61px 61px #681818, 62px 62px #691919, 63px 63px #6a1919, 64px 64px #6a1919, 65px 65px #6b1919, 66px 66px #6b1919, 67px 67px #6c1919, 68px 68px #6c1919, 69px 69px #6d1919, 70px 70px #6d1a1a, 71px 71px #6e1a1a, 72px 72px #6e1a1a, 73px 73px #6f1a1a, 74px 74px #6f1a1a, 75px 75px #701a1a, 76px 76px #711a1a, 77px 77px #711b1b, 78px 78px #721b1b, 79px 79px #721b1b, 80px 80px #731b1b, 81px 81px #731b1b, 82px 82px #741b1b, 83px 83px #741b1b, 84px 84px #751b1b, 85px 85px #751c1c, 86px 86px #761c1c, 87px 87px #761c1c, 88px 88px #771c1c, 89px 89px #781c1c, 90px 90px #781c1c, 91px 91px #791c1c, 92px 92px #791c1c, 93px 93px #7a1d1d, 94px 94px #7a1d1d, 95px 95px #7b1d1d, 96px 96px #7b1d1d, 97px 97px #7c1d1d, 98px 98px #7c1d1d, 99px 99px #7d1d1d, 100px 100px #7e1e1e, 101px 101px #7e1e1e, 102px 102px #7f1e1e, 103px 103px #7f1e1e, 104px 104px #801e1e, 105px 105px #801e1e, 106px 106px #811e1e, 107px 107px #811e1e, 108px 108px #821f1f, 109px 109px #821f1f, 110px 110px #831f1f, 111px 111px #831f1f, 112px 112px #841f1f, 113px 113px #851f1f, 114px 114px #851f1f, 115px 115px #861f1f, 116px 116px #862020, 117px 117px #872020, 118px 118px #872020, 119px 119px #882020, 120px 120px #882020, 121px 121px #892020, 122px 122px #892020, 123px 123px #8a2020, 124px 124px #8a2121, 125px 125px #8b2121, 126px 126px #8c2121, 127px 127px #8c2121, 128px 128px #8d2121, 129px 129px #8d2121, 130px 130px #8e2121, 131px 131px #8e2222, 132px 132px #8f2222, 133px 133px #8f2222, 134px 134px #902222, 135px 135px #902222, 136px 136px #912222, 137px 137px #912222, 138px 138px #922222, 139px 139px #932323, 140px 140px #932323, 141px 141px #942323, 142px 142px #942323, 143px 143px #952323, 144px 144px #952323, 145px 145px #962323, 146px 146px #962323, 147px 147px #972424, 148px 148px #972424, 149px 149px #982424, 150px 150px #992424, 151px 151px #992424, 152px 152px #9a2424, 153px 153px #9a2424, 154px 154px #9b2525, 155px 155px #9b2525, 156px 156px #9c2525, 157px 157px #9c2525, 158px 158px #9d2525, 159px 159px #9d2525, 160px 160px #9e2525, 161px 161px #9e2525, 162px 162px #9f2626, 163px 163px #a02626, 164px 164px #a02626, 165px 165px #a12626, 166px 166px #a12626, 167px 167px #a22626, 168px 168px #a22626, 169px 169px #a32626, 170px 170px #a32727, 171px 171px #a42727, 172px 172px #a42727, 173px 173px #a52727, 174px 174px #a52727, 175px 175px #a62727, 176px 176px #a72727, 177px 177px #a72828, 178px 178px #a82828, 179px 179px #a82828, 180px 180px #a92828, 181px 181px #a92828, 182px 182px #aa2828, 183px 183px #aa2828, 184px 184px #ab2828, 185px 185px #ab2929, 186px 186px #ac2929, 187px 187px #ac2929, 188px 188px #ad2929, 189px 189px #ae2929, 190px 190px #ae2929, 191px 191px #af2929, 192px 192px #af2929, 193px 193px #b02a2a, 194px 194px #b02a2a, 195px 195px #b12a2a, 196px 196px #b12a2a, 197px 197px #b22a2a, 198px 198px #b22a2a, 199px 199px #b32a2a, 200px 200px #b42b2b
}

<div class="main">


</div>

背景颜色为：#b42b2b

最黑暗的阴影点在：rgba(0,0,0,60%)

Answer 1

您可以使用伪元素，线性渐变和变换来执行此操作。

没有圆角：

body { 
  background: #b42b2b;
}

div {
  width: 300px;
  height: 100px;
  background: white;
  position: relative;
}

div:before {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 100px;
  content: '';
  background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
  transform: skewY(45deg);
  transform-origin: 0 0;
}

div:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100px;
  content: '';
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
  transform: skewX(45deg);
  transform-origin: 0 0;
}

<div></div>

更新

圆角需要更加精细，因为您必须将前/后伪元素放置在正确的位置，以防止在角落中显示孔并防止阴影重叠。像LESS / SASS这样的预处理器肯定可以简化正确的数学运算。

圆角：

body { 
  background: #b42b2b;
}

div {
  width: 300px;
  height: 100px;
  background: white;
  position: relative;
  border-radius: 5px;
}

div:before {
  z-index: -1;
  position: absolute;
  top: 1px;
  left: calc(100% - 2.5px);
  width: 100px;
  height: calc(100% - 3.5px);
  content: '';
  background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
  transform: skewY(45deg);
  transform-origin: 0 0;
}

div:after {
  z-index: -1;
  position: absolute;
  top: calc(100% - 2.5px);
  left: 1px;
  width: calc(100% - 3.5px);
  height: 100px;
  content: '';
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
  transform: skewX(45deg);
  transform-origin: 0 0;
}

<div></div>

Answer 2

您只能使用媒体查询为屏幕宽度较大的设备制作阴影，我建议使用：

  

@media（min-width：900px）{。main {     box-shadow：您的设置   }}

在执行此代码并从其原始位置删除box-shadow之后，框阴影将仅在屏幕上显示至少900px宽