CSS之魂：巧妙实现内凹圆，惊艳你的网页设计

前端

2023-11-23 11:19:42

CSS 之内凹圆的实现

前言

最近在小程序项目中，UI想让我实现一种卡券方式的样式，也就是圆角带有内凹的样式， borderRadius配合伪元素可以巧妙的实现这种样式。

效果图

效果图

实现思路

1. 内凹圆原理

CSS 内凹圆的实现原理，是巧妙利用圆形和伪元素的组合。首先，通过设置元素为圆形，然后利用伪元素模拟出内凹部分，两者叠加就能呈现出内凹圆的效果。

2. 实现步骤

设置圆形元素

首先，需要创建一个圆形元素。可以使用 HTML 的<div>标签，并通过 CSS 设置其样式。

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ff0000;
}

添加伪元素

接下来，使用伪元素<::before>来模拟内凹部分。

.circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff;
}

3. 调整位置和样式

最后，可以根据需要调整内凹圆的位置和样式，比如调整内凹圆的大小、颜色、透明度等。

4. 案例演示

下面是一个内凹圆的实际案例。

<div class="circle-container">
  <div class="circle"></div>
</div>

.circle-container {
  width: 400px;
  height: 400px;
  background-color: #ffffff;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ff0000;
}

.circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff;
}