欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

实现圆边框的渐变色

程序员文章站 2024-03-25 20:05:04
...

交流群号: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>


相关标签: 微信小程序 css

上一篇: Unity帧动画

下一篇: DAX