如何用 CSS 的 box-shadow 來做 S 型圓角？

前言

前幾天看到這樣的卡片效果，覺得他圖片和下面文字部分銜接的樣子很特別，是一個 S 型的圓角。

研究之後發現它居然是用 box-shadow 做的！？

往下看具體怎麼做吧！

HTML ＆ CSS 基本樣式

HTML 可以分為兩的部分，圖片 image 和內容 content，為了讓卡片的白色區塊也可以有模糊效果，會用 image 的 before 和 after 偽元素做，這樣直接在 image 上用 filter 就好。

  <div class="card">
    <div class="card__img"></div>
    <div class="card__content">
      <div class="card__content__header">
        <h2 class="card__content__heading">Tokyo</h2>
           <p class="card__content__subheading">Japan</p>
      </div>
      <p class="card__content__text">
        Lorem ipsum ...
      </p>
    </div>
  </div>

.card {
	--circle-radius: 60px;

	width: 400px;
	min-height: 460px;
	background-color: #fff;
	border-radius: var(--circle-radius);
	overflow: hidden;
}
.card__img {
	position: relative;
	width: 100%;
	height: 400px;
	background: url(./image.jpg) no-repeat center center / cover;
}
/* 文字內容 */
.card__content {
	position: relative;
	bottom: calc(var(--circle-radius) / 2);
	margin-inline: 40px;
}
.card__content__subheading {
	font-size: 14px;
}

這邊讓 content 往上移一點是為了配合白色區塊的位置。

將文字藏起來

接著我們利用 grid-template-row 的方式將文字藏起來，heading 的部分可以用 min-content 來保持高度。

/* 利用 grid 將文字藏起來 */
.card__content {        
	display: grid;
	grid-template-rows: min-content 0fr;
	transition: grid-template-rows 0.4s;
}      
.card__content__text {
	overflow: hidden;
}

記得在 text 的地方要用 overflow: hidden; 來讓他可以被壓縮。

製作白色區塊和 S 型圓角

接下來我們來製作下方的白色區塊和 S 型圓角。

下方長條的白色區塊很簡單，基本上就是設定 height 和 border-radius。

重點是右上方的圓角該怎麼做呢？我們先用 affter 做一個圓形在那邊（這邊加上背景讓你比較好看）。

.card__img::before, .card__img::after {
	content: "";
	position: absolute;
}
/* 長方形白色區壞 */
.card__img::before {
	bottom: calc(var(--circle-radius) * -1);
	width: 100%;
	height: calc(var(--circle-radius) * 2);
	border-radius: var(--circle-radius) var(--circle-radius) 0 0;
	background-color: #fff;
}
/* 右上半圓形白色區塊 */
.card__img::after {
	right: 0;
	bottom: var(--circle-radius);
	width: calc(var(--circle-radius) * 2); 
	height: calc(var(--circle-radius) * 2); 
	border-radius: 50%;

	background: #ffffff;
}

接著我們可以用 box-shadow 來填充圓形右下角的區塊，神奇的是 box-shadow 並不會顯示在圖形正後方，所以此時將背景設成 transparent 就可以做出 S 型圓角了！

.card__img::after {
	background: transparent;
	box-shadow: var(--circle-radius) var(--circle-radius) 0 0 #fff;
}

我把 overflow 拿掉就可以看到他實際的樣子

加上 Hover 動畫效果

最後加上 hover 效果就大功告成了～

值得一提的是在 card__content 的地方是使用

grid-template-rwos: min-content 1fr;

來展開文字的，是很實用的技巧，他可以根據文字的高度自動調整伸縮的高度！

/* 動畫 */
.card__img {
	filter: blur(24px);
	transition: filter 0.4s;
}
.card:hover .card__img {
	filter: blur(0);
	transition-delay: 0s;
}
.card:hover .card__content {
	grid-template-rows: min-content 1fr;
	transition-delay: 0s;
}
.card__content__text {
	opacity: 0;
	transition: margin 0s 0.4s, opacity 0.4s;
}
.card:hover .card__content__text {
	margin-top: 16px;
	opacity: 1;
	transition-delay: 0.4s, 0.4s;
}

總結

這種 S 型圓角是用 box-shadow 做的，而且 safari 也可以使用，算非常神奇的做法，學起來可以用在很多裝飾上～

今天就這樣，下篇貼文見～