Question

我目前有以下＆＃34;扁长阴影＆＃34; （我已经删除了3/4的代码，以免崩溃stackoverflow - 在我的文本编辑器中，每个阴影都有自己的行，它来自大约600行代码），我根据{{3 }} Matt Lambert's。

＆＃13;

body {
  background-color: #ddd;
}
div {
  min-height: 64px;
  width: 64px;
  text-align: center;
  background-color: cyan;
  border: 1px solid blue;
  box-shadow: #8c8c8c 1px 1px, #8c8c8c 2px 2px, #8c8c8c 3px 3px, #8c8c8c 4px 4px, #8c8c8c 5px 5px, #8c8c8c 6px 6px, #8c8c8c 7px 7px, #8c8c8c 8px 8px, #8c8c8c 9px 9px, #8c8c8c 10px 10px, #8c8c8c 11px 11px, #8c8c8c 12px 12px, #8c8c8c 13px 13px, #8c8c8c 14px 14px, #8c8c8c 15px 15px, #8c8c8c 16px 16px, #8c8c8c 17px 17px, #8c8c8c 18px 18px, #8c8c8c 19px 19px, #8c8c8c 20px 20px, #8c8c8c 21px 21px, #8c8c8c 22px 22px, #8c8c8c 23px 23px, #8c8c8c 24px 24px, #8c8c8c 25px 25px, #8c8c8c 26px 26px, #8c8c8c 27px 27px, #8c8c8c 28px 28px, #8c8c8c 29px 29px, #8c8c8c 30px 30px, #8c8c8c 31px 31px, #8c8c8c 32px 32px, #8c8c8c 33px 33px, #8c8c8c 34px 34px, #8c8c8c 35px 35px, #8c8c8c 36px 36px, #8c8c8c 37px 37px, #8c8c8c 38px 38px, #8c8c8c 39px 39px, #8c8c8c 40px 40px, #8c8c8c 41px 41px, #8c8c8c 42px 42px, #8c8c8c 43px 43px, #8c8c8c 44px 44px, #8c8c8c 45px 45px, #8c8c8c 46px 46px, #8c8c8c 47px 47px, #8c8c8c 48px 48px, #8c8c8c 49px 49px, #8c8c8c 50px 50px, #8c8c8c 51px 51px, #8c8c8c 52px 52px, #8c8c8c 53px 53px, #8c8c8c 54px 54px, #8c8c8c 55px 55px, #8c8c8c 56px 56px, #8c8c8c 57px 57px, #8c8c8c 58px 58px, #8c8c8c 59px 59px, #8c8c8c 60px 60px, #8c8c8c 61px 61px, #8c8c8c 62px 62px, #8c8c8c 63px 63px, #8c8c8c 64px 64px, #8c8c8c 65px 65px, #8c8c8c 66px 66px, #8c8c8c 67px 67px, #8c8c8c 68px 68px, #8c8c8c 69px 69px, #8c8c8c 70px 70px, #8c8c8c 71px 71px, #8c8c8c 72px 72px, #8c8c8c 73px 73px, #8c8c8c 74px 74px, #8c8c8c 75px 75px, #8c8c8c 76px 76px, #8c8c8c 77px 77px, #8c8c8c 78px 78px, #8c8c8c 79px 79px, #8c8c8c 80px 80px, #8c8c8c 81px 81px, #8c8c8c 82px 82px, #8c8c8c 83px 83px, #8c8c8c 84px 84px, #8c8c8c 85px 85px, #8c8c8c 86px 86px, #8c8c8c 87px 87px, #8c8c8c 88px 88px, #8c8c8c 89px 89px, #8c8c8c 90px 90px, #8c8c8c 91px 91px, #8c8c8c 92px 92px, #8c8c8c 93px 93px, #8c8c8c 94px 94px, #8c8c8c 95px 95px, #8c8c8c 96px 96px, #8c8c8c 97px 97px, #8c8c8c 98px 98px, #8c8c8c 99px 99px, #8c8c8c 100px 100px, #8c8c8c 101px 101px, #8c8c8c 102px 102px;
}

＆＃13;

<div>
  wow that's a lot of CSS!
</div>

＆＃13;

我想在我的网站中加入这个内容，但我对它占用的代码长度感到沮丧（在这种情况下，我不能使用图形）。

我研究过编写较少代码的方法，但还没有找到一种简单的CSS方式 - AKA no SASS等。

tutorial我发现的一件事 - 不太有希望：

上面的示例几乎是使用纯CSS实现它的唯一方法，虽然看起来确实非常疯狂 - 它会让你使用转换等来调整这些文本阴影。 - @Lost Left Stack

如果有更紧凑的方法，我想再次询问stackoverflow社区。

Answer 1

你可以使用2个带偏斜的伪来模拟相同的阴影

＆＃13;

div {
  min-height: 64px;
  width: 64px;
  text-align: center;
  background-color: cyan;
  border: 1px solid blue;
  position: relative;
}

div:before, div:after {
  content: "";
  position: absolute;
  top: -1px;   /* compensate border in the root element */ 
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: -1;
  transform-origin: right bottom;
}

div:before {
  transform: skewX(45deg);
  box-shadow: 1px 60px 0px 0px gray, 1px 120px 0px 0px lightgray;  /* 1px in x direction to avoid small gap between shadows */
}

div:after {
  transform: skewY(45deg);
  box-shadow: 60px 0px gray, 120px 0px lightgray;
}

＆＃13;

<div>
  wow that's a lot of CSS!
</div>

＆＃13;

这种方法的一个优点是你可以轻松地调整阴影的角度

＆＃13;

body {
  background-color: #ddd;
}
div {
  min-height: 64px;
  width: 64px;
  text-align: center;
  background-color: cyan;
  border: 1px solid blue;
  position: relative;
}

div:before, div:after {
  content: "";
  position: absolute;
  top: -1px;   /* compensate border in the root element */ 
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: -1;
  transform-origin: right bottom;
}

div:before {
  transform: skewX(60deg);
  box-shadow: 1px 34px 0px 0px gray;  /* 1px in x direction to avoid small gap between shadows */
}

div:after {
  transform: skewY(30deg);
  box-shadow: 60px 0px gray;
}

＆＃13;

<div>
  wow that's a lot of CSS!
</div>

＆＃13;

要实现更长的阴影，可以增加伪尺寸：

＆＃13;

div {
  min-height: 64px;
  width: 64px;
  text-align: center;
  background-color: cyan;
  border: 1px solid blue;
  position: relative;
}

div:before, div:after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: -1;
  transform-origin: right bottom;
}

div:before {
  height: 200px; /* increased height */
  left: -1px;
  transform: skewX(45deg);
  box-shadow: 1px 200px 0px 0px gray;  /* 1px in x direction to avoid small gap between shadows */
}

div:after {
  width: 200px;  /* increased width */
  top: -1px;
  transform: skewY(45deg);
  box-shadow: 200px 0px gray;
}

＆＃13;

<div>
  wow that's a lot of CSS!
</div>

＆＃13;

Answer 2

如果您正在使用SASS或SCSS，则会剪切元素及其box-shadow属性，如下所示：

div {
    box-shadow: /* your very long value */;
}

然后将其粘贴到另一个SASS / SCSS文件中。例如，您将其命名为boxShadow.scss。之后，将其导入主SASS / SCSS文件，如下所示：@import 'boxShadow'。通过这样做，您可以为主SASS / SCSS文件节省大量空间。

创造一个平坦的长阴影＆＃34;用于CSS中具有较少CSS的框

2 个答案: