CSS卡的阴影效果

Card-style components are pretty much still a thing these days, and there are many ways to make a bunch of identical rectangles look prettier. I’m quite fond of the pop art, or maybe it’s more of a comic book style art direction that uses thick bold outlines and bright colours.

卡片式的组件现在几乎还是一种东西，有很多方法可以让一堆相同的矩形看起来更漂亮。我相当喜欢波普艺术，或者说它更像是一种漫画风格的艺术方向，使用粗大的轮廓和明亮的颜色。

So the look and feel we are going for looks something like the image below:

因此，我们所要的外观和感觉看起来就像下面的图片。

2 cards with shadow effects

Specifics of the design for the larger shadow are as follows (extracted from Figma):

较大阴影的设计具体内容如下（摘自Figma）。


height: 240px;
width: 160px;
left: 260px;
top: 0px;
border-radius: 8px; position: absolute;
width: 160px;
height: 240px; background: #FFFFFF;
border: 4px solid #1F1F1F;
border-radius: 8px; height: 240px;
width: 160px;
left: 274px; top: 14px; border-radius: 8px; position: absolute;
width: 160px;
height: 240px; background: #FFD700;
border: 4px solid #1F1F1F;
border-radius: 8px;

To summarise in words, the card has a solid 4px border and a border-radius of 8px, and the card’s shadow too has a solid 4px border with 8px border-radius and is offset from the card by 14px on both the x and y axes.

简而言之，卡片的边框是实心的4px，边框半径为8px，卡片的阴影也是实心的4px边框，边框半径为8px，在x轴和y轴上都与卡片偏离14px。

At first, I thought this would be quite easy, because I had used multiple box shadows before to great satisfaction (see Codepen below, specifically the pattern of dots on the first 3 albums):

起初，我以为这很容易，因为我以前使用过多个盒式阴影，非常满意（见下面的Codepen，特别是前3个相册上的点的图案）。

My idea was to use 2 box shadows to create the coloured shadow and the border for the coloured shadow.

我的想法是用2个盒状阴影来创造彩色阴影和彩色阴影的边框。

But first, let’s review `box-shadow`

但首先，让我们回顾一下`box-shadow`

The full syntax for the box-shadow property can take 2-4 length values, an optional colour and an optional inset keyword. The length values represent the x-offset, the y-offset, the blur-radius and the spread-radius, in that specific order.

box-shadow 属性的完整语法可以采用2-4个长度值，一个可选的颜色和一个可选的嵌入关键字。长度值代表x-偏移、y-偏移、模糊半径和扩散半径，按特定顺序排列。

Here’s the bit that will probably make you che...

CSS卡的阴影效果