一款纯CSS实现的精致好看的圆角渐变边框
作者:admin 时间:2023-7-7 14:5:13 浏览:本文介绍一款纯CSS实现的精致好看的圆角渐变边框。
效果图
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
:root{
--border-width: 12px;
--border-radius: 2rem;
}
body{
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
section {
position: relative;
border: var(--border-width) solid transparent;
border-radius: var(--border-radius);
background: white;
background-clip: padding-box;
padding: 1rem;
text-align: center;
box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
section::after {
position: absolute;
top: calc(var(--border-width) * -1); bottom: calc(var(--border-width) * -1);
left: calc(var(--border-width) * -1); right: calc(var(--border-width) * -1);
background: linear-gradient(to bottom right, #ee2400, #699da2, #fbd9d3);
content: '';
z-index: -1;
border-radius: var(--border-radius);
}
</style>
</head>
<body >
<section>
<p>
纯CSS实现的圆角渐变边框<br/>
</p>
</section>
</body>
</html>
实现方法：通过伪元素 ::after 把两层方块元素叠加在一起，其中下层是一个渐变背景，上层为白色背景，最后呈现出如文章开头提供的效果图。
在前面，我也介绍过类似的渐变边框，请参看文章：
此外，我也曾经介绍过几款漂亮好看的图像边框和渐变边框，请参看文章：
相关文章
相关文章
x
- 站长推荐
