实现3D盒子阴影效果的更简单方式

huangapple go评论56阅读模式
英文:

Simpler way to achieve a 3D box-shadow effect

问题

我有一个带有阴影效果的CSS拱门。是否有CSS的特性可以减少box-shadow的行数?

html {
  padding: 40px;
}
.arch {
  transition: all 250ms ease-in 0s;
  background: orange;
  border-radius: 50% 50% 0px 0px;
  width: 270px;
  height: 350px;
  position: relative;
  box-shadow: -1px 1px 0px #222, -2px 2px 0px #222, -3px 3px 0px #222, -4px 4px 0px #222, -5px 5px 0px #222, -6px 6px 0px #222, -7px 7px 0px #222, -8px 8px 0px #222, -9px 9px 0px #222, -10px 10px 0px #222, -11px 11px 0px #222, -12px 12px 0px #222, -13px 13px 0px #222, -14px 14px 0px #222, -15px 15px 0px #222, -16px 16px 0px #222, -17px 17px 0px #222, -18px 18px 0px #222, -19px 19px 0px #222, -20px 20px 0px #222;
}
<div class="arch"></div>
英文:

I have a CSS arch with a box-shadow, achieving a 3D effect. Is there a feature of CSS that would reduce the number of lines for box-shadow?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

html {
  padding: 40px;
}
.arch {
  transition: all 250ms ease-in 0s;
    background: orange;
    border-radius: 50% 50% 0px 0px;
    width: 270px;
    height: 350px;
    position: relative;
    box-shadow: -1px 1px 0px #222,
                -2px 2px 0px #222,
                -3px 3px 0px #222,
                -4px 4px 0px #222,
                -5px 5px 0px #222,
                -6px 6px 0px #222,
                -7px 7px 0px #222,
                -8px 8px 0px #222,
                -9px 9px 0px #222,
                -10px 10px 0px #222,
                -11px 11px 0px #222,
                -12px 12px 0px #222,
                -13px 13px 0px #222,
                -14px 14px 0px #222,
                -15px 15px 0px #222,
                -16px 16px 0px #222,
                -17px 17px 0px #222,
                -18px 18px 0px #222,
                -19px 19px 0px #222,
                -20px 20px 0px #222;
}

<!-- language: lang-html -->

&lt;div class=&quot;arch&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

这是一个使用 box-shadowclip-path 的想法。请注意,第一个阴影的扩展不是0。

.arch {
  background: 橙色;
  边框半径: 50% 50% 0px 0px;
  宽度: 270px;
  高度: 300px;
  间距: 50px;
  阴影: 
    -15px 15px 0px 5px #222, /* 扩展等于5px */
    0 20px 0px #222; /* 20px = 15px + 5px */
  裁剪路径: polygon(-20px 0,100% 0,100% 100%,calc(100% - 20px) calc(100% + 20px),-20px calc(100% + 20px))
}
<div class="arch"></div>
英文:

Here is an idea using box-shadow and clip-path. Notice that the first shadow is using a spread different from 0

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.arch {
  background: orange;
  border-radius: 50% 50% 0px 0px;
  width: 270px;
  height: 300px;
  margin: 50px;
  box-shadow: 
    -15px 15px 0px 5px #222, /* a spread equal to 5px */
      0   20px 0px #222; /* 20px = 15px + 5px */
  clip-path: polygon(-20px 0,100% 0,100% 100%,calc(100% - 20px) calc(100% + 20px),-20px calc(100% + 20px))
}

<!-- language: lang-html -->

&lt;div class=&quot;arch&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

你可以使用伪类来实现类似的效果:

html {
  padding: 40px;
}

.arch {
  background: orange;
  border-radius: 50% 50% 0px 0px;
  width: 270px;
  height: 350px;
  position: relative;
}

.arch::before {
  content: " ";
  width: 100%;
  height: 20px;
  background-color: red;
  position: absolute;
  bottom: -20px;
  right: 10px;
  transform: skew(-45deg, 0deg);
}

.arch::after {
  content: " ";
  width: 100%;
  height: 100%;
  background-color: green;
  position: absolute;
  border-radius: 50% 50% 0px 0px;
  left: -20px;
  bottom: -20px;
  z-index: -1;
}

如果你愿意使用SVG,也可以这样实现:

<svg width="290" height="370">
   <circle cx="135" cy="155" r="135" fill="green" />
   <rect x="0" y="155" width="270" height="215" fill="green"/>
   <polygon points="0,370 270,370 290,350 20,350" fill="red" />
   <circle cx="155" cy="135" r="135" fill="orange" />
   <rect x="20" y="135" width="270" height="215" fill="orange"/>
</svg>
英文:

You could use pseudo classes to achieve a similar effect:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

html {
  padding: 40px;
}

.arch {
    background: orange;
    border-radius: 50% 50% 0px 0px;
    width: 270px;
    height: 350px;
    position: relative;
}

.arch::before{
  content: &quot; &quot;;
  width: 100%;
  height: 20px;
  background-color: red;
  position: absolute;
  bottom: -20px;
  right: 10px;
  transform: skew(-45deg, 0deg);
}

.arch::after{
  content: &quot; &quot;;
  width: 100%;
  height: 100%;
  background-color: green;
  position: absolute;
  border-radius: 50% 50% 0px 0px;
  left: -20px;
  bottom: -20px;
  z-index: -1;
}

<!-- language: lang-html -->

&lt;div class=&quot;arch&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

If you are okay with using SVG, you could use an SVG too:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;svg width=&quot;290&quot; height=&quot;370&quot;&gt;
   &lt;circle cx=&quot;135&quot; cy=&quot;155&quot; r=&quot;135&quot; fill=&quot;green&quot; /&gt;
   &lt;rect x=&quot;0&quot; y=&quot;155&quot; width=&quot;270&quot; height=&quot;215&quot; fill=&quot;green&quot;/&gt;
   &lt;polygon points=&quot;0,370 270,370 290,350 20,350&quot; fill=&quot;red&quot; /&gt;
   &lt;circle cx=&quot;155&quot; cy=&quot;135&quot; r=&quot;135&quot; fill=&quot;orange&quot; /&gt;
   &lt;rect x=&quot;20&quot; y=&quot;135&quot; width=&quot;270&quot; height=&quot;215&quot; fill=&quot;orange&quot;/&gt;
&lt;/svg&gt; 

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月7日 05:01:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/75953749.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定