渐变色圆角边框(内容区域圆角)
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>渐变色圆角边框(内容区域圆角)</title>
<style>
#container{
width:800px;
height:400px;
border-radius:30px;
background-color:white;
position:relative;
padding:20px;
margin:50px;
}
#container::before{
content:'';
position:absolute;
top:-30px;
right:-30px;
bottom:-30px;
left:-30px;
border-radius:inherit;
background:linear-gradient(96deg,#26d2e00%,#437bb397%);
z-index:-1;
}
</style>
</head>
<body>
<divid="container">内容</div>
</body>
</html>
渐变色圆角边框(内容区域直角)
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>渐变色圆角边框(内容区域直角)</title>
<style>
#container{
position:relative;
width:800px;
height:400px;
border:30pxsolid;
border-image:linear-gradient(45deg,#26d2e0,#437bb3)1;
clip-path:inset(0round30px);
margin:50px;
}
</style>
</head>
<body>
<divid="container">内容</div>
</body>
</html>
|
运行时间载入中.....