CSS box-shadow 阴影

Question

为了练习和乐趣，我正在寻求在一个元素中用纯 CSS 重新创建以下 Logo

如果您注意到，每个“条形”都有一个带阴影的小灰色区域，给人一种深度感。如果可能的话，我想用纯 CSS 创建这些。对我来说棘手的是，它们看起来像是在它们上面的栅栏后面，所以它必须在单独的栅栏级别才能做到这一点，而不是对整个事物应用面具。

到目前为止，我已经能够使用伪元素和一些框阴影创建条形，并使用渐变和 background-clip: text 为 B 赋予颜色。

通常我会使用旋转元素或 mask 来应用阴影，但由于我使用框阴影创建了条形，我不知道我将如何，或者即使我可以，将它们应用于单个阴影(从技术上讲，它们都是一个影子，但我的意思是将它应用于一个条而不覆盖其他条)

Here's what I have so far

我的代码

<div class='B'>B</div>

body {
    background:#FFF8E6;
}
.B {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-150px;
    line-height:236px;
    font-size:225pt;
    font-weight:bold;
    font-family:'Carrois Gothic SC', sans-serif;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(9%, #FFBF7F), color-stop(9%, #F4A668), color-stop(19.6%, #F4A668), color-stop(19.9%, #F38669), color-stop(28.7%, #F38669), color-stop(29%, #AF9F88), color-stop(49%, #AF9F88), color-stop(49%, #cfb698), color-stop(70%, #cfb698), color-stop(70%, #ecd2b1));
    color:transparent;
    -webkit-background-clip: text;
}
.B:after {
    content:'';
    z-index:-1;
    position:absolute;
    left:-387px;
    height:45px;
    width:150px;
    border-radius: 0px 0px 0px 50px;
    box-shadow: 180px -12px 0 -9pt #FFBF7F, 220px -12px 0 -9pt #FFBF7F, 276px -12px 0 -9pt #FFBF7F, 215px 11px 0 -8pt #F4A668, 220px 11px 0 -8pt #F4A668, 275px 11px 0 -8pt #F4A668, 255px 33px 0 -8pt #F38669, 275px 33px 0 -8pt #F38669, 255px 56px 0 -9pt #898481, 276px 56px 0 -9pt #898481,
    /* I DON'T KNOW HOW TO FLIP THESE WITHOUT ADDING AN ELEMENT */
    275px 78px 0 -8pt #A4978E, 300px 101px 0 -8pt #B8A28A,
    /************************************************************/
    250px 90px 0 0px #CABBA8, 190px 45px 0 0px #CCBCAC, 150px 0 0 0px #FCCDA1;
}

现在，我认为这是不可能的，但我总是对 SO 用户的独创性感到惊讶。

TL,DR 如何在不添加更多元素的情况下创建这些对 Angular 线阴影？如果需要，我愿意接受与我正在使用的方法不同的其他方法

编辑:Here is the final result

Answer 1

好吧，我不能让这个问题悬而未决......

我没能用你的方法解决它。使倾斜的阴影是可行的，使其在圆形边框下被剪裁，而不是(至少我还没有找到方法)。

备选方案:使用大量背景:

.B:before {
    content:'';
    position:absolute;
    left: -237px;
    height:135px;
    width: 258px;
    background-image: linear-gradient(0deg,#898481,#898481),
            radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
            linear-gradient(0deg,#898481,#898481),
            radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
            linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px),            
            radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
            linear-gradient(0deg,#ccbcac,#ccbcac),
            linear-gradient(0deg,#898481,#898481), 
            radial-gradient(circle at top right, #898481 22px, transparent 22px),
            linear-gradient(187deg,#B46550 2px,#f38669 24px),
            radial-gradient(circle at top right, #f38669 22px, transparent 22px),
            linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px),
            radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
            linear-gradient(0deg,#ccbcac,#ccbcac), 
            linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px),
            radial-gradient(circle at top right, #f4a668 22px, transparent 22px),
            linear-gradient(0deg,#ffbf7f,#ffbf7f), 
            radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
            radial-gradient(circle at top right, #fccda1 44px, transparent 30px),
            linear-gradient(0deg,#FCCDA1,#fccda1); 
    background-position: 
          185px 110px, 163px 110px, 163px 88px, 144px 88px, 106px 88px,
          41px 88px, 137px 88px,            
          142px 66px, 120px 66px,
          142px 44px, 120px 44px,
           64px 44px,42px 44px, 
78px 44px,   97px 22px, 76px 22px, 65px 0px, 43px -1px, 0px 0px, 44px 0px;
    background-size: 198px 22px, 22px 22px,198px 22px, 22px 22px, 76px 22px, 96px 44px, 200px 44px,198px 22px, 22px 22px,198px 22px, 22px 22px, 96px 44px, 44px 44px, 200px 44px, 198px 22px, 22px 22px, 198px 22px, 22px 22px, 44px 44px, 200px 44px;
    background-repeat: no-repeat;    
}

大部分背景用于重现您已有的设计部分。要获得形状，您需要一个矩形背景，左侧有一个圆形背景。

对于阴影，使用了两种技术。

最简单的方法是将所有阴影包含在一个矩形区域中。然后你可以使用与制作矩形区域相同的线性渐变来获得它，只是给它一个更暗的阴影。

比较难的是那些重叠在圆圈部分的。在这里，我需要为阴影使用另一个单独的背景图像。

result

我只在 Chrome 中验证了结果。

当然可以在信中使用这个技巧:

更新了这封信的 CSS

.B {
    position:absolute;
    top: 200px;
    left: 300px;
    margin-top:-150px;
    line-height:236px;
    font-size:225pt;
    font-weight:bold;
    font-family:'Carrois Gothic SC', sans-serif;
    background-image: 
         linear-gradient(187deg,#FFBF7F,#FFBF7F),
         linear-gradient(187deg,#cc8650,#F4A668),
         linear-gradient(195deg,#B46550,#F38669),
         linear-gradient(187deg,#8A7668 25px,#AF9F88 35px),
         linear-gradient(187deg,#af9678,#cfb698),
         linear-gradient(187deg,#dcc2a1,#ecd2b1);
    background-position: 
          0px 0px, 0px 9%, 0px 20%, 0px 30%, 0px 60%, 0px 100%;
    background-size: 200px 9%, 200px 11%, 200px 10%, 200px 30%, 200px 30%, 200px 30%, 200px 40%;
    background-repeat: no-repeat;
    color: transparent;
    -webkit-background-clip: text;
}

注释背景 CSS

background-image: linear-gradient(0deg,#898481,#898481),   /* second small bar in last big bar */
    radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
    linear-gradient(0deg,#898481,#898481),                 /* first small bar in last big bar */
    radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
    linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px),        /* shadow */    
    radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),    /* last big bar */ 
    linear-gradient(0deg,#ccbcac,#ccbcac),
    linear-gradient(0deg,#898481,#898481),          /* second small bar in second big bar */
    radial-gradient(circle at top right, #898481 22px, transparent 22px),    
    linear-gradient(187deg,#B46550 2px,#f38669 24px),  /* first small bar in 2nd big bar (shadowed) */
    radial-gradient(circle at top right, #f38669 22px, transparent 22px),     
    linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px),   /* shadow on second big bar */
    radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),   /* second big bar */    
    linear-gradient(0deg,#ccbcac,#ccbcac), 
    linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px),  /* second small bar on top (shadowed) */
    radial-gradient(circle at top right, #f4a668 22px, transparent 22px),   
    linear-gradient(0deg,#ffbf7f,#ffbf7f),                        /* first small bar on top */
    radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
    radial-gradient(circle at top right, #fccda1 44px, transparent 30px), /* big bar on top */
    linear-gradient(0deg,#FCCDA1,#fccda1); 

不完美，但你可以在径向渐变中再增加一步，在圆圈中获得一些阴影:

radial-gradient(circle at top right, #fccda1 42px, #AC8D70 44px, transparent 45px)

限制是这种情况下的阴影必须与边界同心。另一种方法是设置另一个背景，可以是椭圆形的。

shadows on circles