实现圆边框的渐变色

最新推荐文章于 2024-05-13 21:46:27 发布

24min

最新推荐文章于 2024-05-13 21:46:27 发布

阅读量7.9k

点赞数 2

分类专栏：前端微信小程序文章标签：微信小程序 css

本文链接：https://blog.csdn.net/qq_36626755/article/details/80547784

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

微信小程序

1 篇文章 0 订阅

订阅专栏

交流群号：611979698 【目前还没啥人，欢迎加入一起探讨学习~~】

【微信小程序】

可通过伪元素来实现：

效果图如下：

index.wxml代码：

<view class='son-box'>24min</view>

index.wxss代码：

.son-box {
  position: relative;             //父元素定位属性
  width: 80px;
  height: 80px;                   //定义元素的大小
  border-radius: 50%;             //使之保持圆形状态
  text-align: center;             //文字水平居中
  line-height: 80px;              //与height同时使用，使单行文本保持垂直居中
  margin: 0 auto;                 // 块元素居中  
  margin-top: 120px;          
  background: white;               //定义背景颜色
}

.son-box::after {                   //插入伪元素
  position: absolute;               //伪元素定位属性
  content: '';
  background: linear-gradient(red, yellow);    //伪元素背景颜色渐变
  bottom: 0; 
  right: 0;
  left: 0;
  top: 0;                              //定义伪元素出现的位置
  z-index: -1;
  transform: scale(1.1);               //伪元素放大1.1倍
  border-radius: 50%;                  //伪元素也是个圆
}

以上是微信小程序的实现方式，浏览器的实现也一样：

<!DOCTYPE html>
<html>
<head>
	<title>圆边框渐变</title>
	<style type="text/css">
		
		.son-box{
			position: relative;
			width: 80px;
			height: 80px;
			line-height: 80px;
			border-radius: 50%;
			background: white;
			text-align: center;
			margin: 0 auto;
			margin-top: 120px;
		}
		.son-box::after{
			position: absolute;
                        content: '';
                        background: linear-gradient(red, yellow);
                        bottom: 0;
                        right: 0;
                        left: 0;
                        top: 0;
                        z-index: -1;
                        transform: scale(1.1);
                        border-radius: 50%;
		}
	</style>
</head>
<body>
<div class="son-box">24min</div>
</body>
</html>

24min

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
实现圆边框的渐变色

【微信小程序】可通过伪元素来实现：效果图如下：index.wxml代码：&lt;view class='son-box'&gt;24min&lt;/view&gt;index.wxss代码：.son-box { position: relative; //父元素定位属性 width: 80px; height: 80px; /...
复制链接

扫一扫