前言
最近在小程序项目中，UI想让我实现一种卡券方式的样式，本篇文章主要是介绍如何实现内凹圆，以下是实现内凹圆的两种方法
- 利用div和border-radius布局实现
- radial-gradient 实现内凹圆
利用div和border-radius布局实现
构思：
-
首先实现两个view快、上下布局
-
上下的view中，分别再放两个view（flex布局）
-
子view中利用border-radius实现1/4圆
-
上面的view加上虚线、
如下图（本人未画过什么图，随便画了几笔）
两个view的上下布局，并加上flex布局
<view class="top-circle">
</view>
<view class="bottom-circle">
</view>
<style>
.top-circle {
width: 702rpx;
height: 16rpx;
display: flex;
justify-content: space-between;
border-bottom: 1rpx dashed #e4e5e7; // 虚线
}
.bottom-circle {
width: 702rpx;
height: 16rpx;
margin-bottom: 28rpx;
display: flex;
justify-content: space-between;
}
</style>
四个子view实现圆弧
<style>
.top-circle {
width: 702rpx;
height: 26rpx;
display: flex;
justify-content: space-between;
align-items: flex-end;
.top-left-circle1 {
border-top-right-radius: 16rpx;
background: #f25b4f;
border-bottom: 1rpx solid #f25b4f;
}
.top-right-circle1 {
border-top-left-radius: 16rpx;
background: #ed2856;
border-bottom: 1rpx solid #ed2856;
}
border-bottom: 1rpx dashed #e4e5e7;
}
.bottom-circle {
width: 702rpx;
height: 26rpx;
margin-bottom: 28rpx;
display: flex;
justify-content: space-between;
align-items:flex-start;
.bottom-left-circle1 {
border-bottom-right-radius: 16rpx;
background: #f25b4f;
}
.bottom-right-circle1 {
border-bottom-left-radius: 16rpx;
background: #ed2856;
}
}
.circle-view { // 圆的大小
height: 16rpx;
width: 16rpx;
}
</style>
<!-- 内凹圆实现 -->
<view class="top-circle">
<view class="top-left-circle1 circle-view"></view>
<view class="top-right-circle1 circle-view"></view>
</view>
<view class="bottom-circle">
<view class="bottom-left-circle1 circle-view"></view>
<view class="bottom-right-circle1 circle-view"></view>
</view>
利用div和border-radius布局实现效果图如下
radial-gradient实现内凹圆
基本语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| 值 | 描述 |
|---|---|
| shape | 确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变。circle ：指定圆形的径向渐变 |
| size | 定义渐变的大小，可能值：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边 |
| position | 定义渐变的位置。可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。 |
| start-color, ..., last-color | 用于指定渐变的起止颜色。 |
相关理解：
- size（圆的半径） 不会大于 start-color, ..., last-color 的 最小size，大于之后会失效
- position： 圆心的坐标 前者为 x轴，后者为y轴
- start-color, ..., last-color ：渐变效果 一般两者size 相等时，则无渐变效果
- 如下，则是上述代码的效果图
下面是半边内凹圆的实现demo
.egg {
display: block;
margin-top: 30px;
width: 100px;
height: 100px;
background-image: radial-gradient(20px at 10px 50px, #fff 20px, #4169E1 20px);
/* background-image: radial-gradient(20px at 100px 50px, #fff 20px, #4169E1 20px); */
}
若要实现两个内凹圆，则需要用background（background-image）不能展示出图片
其代码如下
.egg {
display: block;
margin-top: 30px;
width: 100px;
height: 100px;
background:
radial-gradient(15px at 10px 50px, #fff 20px, #4169E1 20px) left,
radial-gradient(15px at 40px 50px, #fff 20px, #4169E1 20px) right;
background-size: 50% 100%; /* width height 一般和 background-repeat: no-repeat; 搭配使用 */
background-repeat: no-repeat;
}
用background-size将div切割成左右个一半，此时注意右边的圆心是以中间为分割线计算
若想将中间的白线去掉
只需将 background-size 改为 background-size: 51% 100%;
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Egg</title>
<style>
.egg {
display: block;
margin-top: 30px;
width: 100px;
height: 100px;
background:
radial-gradient(15px at 10px 50px, transparent 20px, #4169E1 20px) left,
radial-gradient(15px at 40px 50px, transparent 20px, #4169E1 20px) right;
background-size: 51% 100%; /* width height 一般和 background-repeat: no-repeat; 搭配使用 */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="egg">
</div>
</body>
</html>
