css3 圆形渐变边框 - A8源码实例

基本信息

源码名称：css3 圆形渐变边框

源码大小：0.69KB

文件格式：.html

开发语言：CSS

更新时间：2018-08-21

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>

<html>
<head>
<title>圆边框渐变</title>
<style type="text/css">
.son-box{
position: relative;
width: 180px;
height: 180px;
line-height: 180px;
border-radius: 50%;
background: white;
text-align: center;
margin: 0 auto;
margin-top: 120px;
}
.son-box::after{
position: absolute;
            content: '';
            background:linear-gradient(blue, yellow,purple);
            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>