我目前在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,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,60％)
解决方法
您可以使用伪元素,线性渐变和变换来完成此操作.
没有圆角：
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.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,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,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,transparent);
transform: skewX(45deg);
transform-origin: 0 0;
}
<div></div>
