css3—圆角渐变边框+透明背景色

00小白

于 2024-07-10 14:13:55 发布

阅读量633

点赞数 21

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/SURenl/article/details/140322504

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Border with Transparent Background</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background: linear-gradient(270deg, #ff7e5f, #feb47b);
background-size: 400% 400%;
animation: gradientScroll 10s ease infinite;
}

@keyframes gradientScroll {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.element {
width: 200px;
height: 200px;
border-radius: 20px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
overflow: hidden; /* 确保内容不会溢出边框 */
}

.element::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
padding: 5px; /* 边框宽度 */
box-sizing: border-box;
background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}

.content {
position: relative;
z-index: 1;
color: #000;
}
</style>
</head>
<body>
<div class="element">
<div class="content">
<p>内容可见，背景透明。</p>
</div>
</div>
</body>
</html>

实现图：