Question

我试图给梯形css3形状赋予阴影，我把它给了盒子阴影，但这就是把一个节目作为一个盒子我想在形状的边缘添加阴影。

border-top: 100px solid rgba(255, 255, 255, 0.3);
border-left: 60px solid transparent; 
border-right: 60px solid transparent;

Answer 1

不，你不能给任何方面留下阴影而不是4（除了盒子之外的任何东西）

由于这个原因，它被称为BOX-shadow。

请记住它也只是水平和垂直...任何对角线都不起作用。 2边水平，2边垂直

Answer 2

使用CSS

body {
    background: linear-gradient(90deg, lightblue, yellow)
}

.trapezoid {
    left: 87px;
    top: 50px;
    position: absolute;
    height: 100px;
    width: 500px;
}

.trapezoid:before, .trapezoid:after {
    content: '';
    position: absolute;
    width: 65%;
    height: 100%;
    border-color: red;
    border-style: solid;
    border-radius: 10px;
    background-color: lightblue;
    box-shadow: 4px 4px 6px black;
    z-index: -1;
     -webkit-animation: shadow 2s infinite; 
}
.trapezoid:before {
    left: -7%;
    border-width: 3px 0px 3px 3px;
    -webkit-transform: skewX(-20deg);
}

.trapezoid:after {
    right: 0px;
    border-width: 3px 3px 3px 0px;
    -webkit-transform: skewX(20deg);
    clip: rect(-40px, 450px, 220px, 30px);
}

@-webkit-keyframes shadow {
      0% {    box-shadow: 10px 10px 4px  black;}
     25% {    box-shadow: -10px 10px 4px black;}
     50% {    box-shadow: -10px -10px 4px black;}
     75% {    box-shadow: 10px -10px 4px black;}
    100% {    box-shadow: 10px 10px 4px black;}
}

you get this

作为奖励，在webkit上动画。

（阴影并不完美，特别是如果你给它模糊，但只能用CSS获得）

Answer 3

如果你想为完全不规则的形状添加阴影而不仅仅是扭曲的矩形，那么你可以使用CSS3过滤器调用drop-shadow

.shadow
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    -moz-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

这样可以产生与源对象形状相同的阴影（不规则边缘，凹槽和包含的位）

您还可以使用应用阴影的SVG图像和样式

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
    <feOffset dx="12" dy="12" result="offsetblur"/>
    <feFlood flood-color="rgba(0,0,0,0.5)"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

，例如

.shadow {
  url(shadow.svg#drop-shadow);
}

A complete comparison详细介绍了这些技术的使用情况，并展示了许多有趣的使用示例。

甚至IE都有一个过滤器来帮助实现这一点（不像上面显示的那样好）

.shadow {
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

我们可以为自定义css3形状赋予阴影

3 个答案: