<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
position: relative;
}
/* 圆角+渐变边框是无效的 */
/* .loop {
margin: 50px auto;
width: 456px;
height: 456px;
opacity: 0.5;
border: 79.98px solid;
border-radius: 50%;
border-image: linear-gradient(135deg, rgba(255, 159, 115, 0) 11%, rgba(253, 159, 115, 0.45) 90%);
} */
/* 缺陷：内部元素无法显示出来 */
/* 原因：CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 */
/* 解决方案：可通过定位 */
.loop {
width: 456px;
height: 456px;
opacity: 0.5;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 159, 115, 0) 11%, rgba(253, 159, 115, 0.45) 90%);
mask: radial-gradient(transparent 148px, #000 148px);
position: absolute;
}
.loop div{
color: red;
}
</style>
</head>
<body>
<div class="loop">
<div>123</div>
</div>
<span>testtesttesttesttesttesttest</span>
</body>
</html>
扫一扫
1336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
