css3边框颜色渐变且四角有内凹圆形代码实例
分类：实例代码
本章节分享一段代码实例，它实现了边框颜色渐变且四角有内凹的圆形效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div {
box-sizing: border-box;
}
body {
background-color: #333;
padding: 0;
}
.main {
padding: 10px;
position: fixed;
height: 600px;
width: 400px;
background: #345;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main .wrapper {
position: relative;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(left, #fd5, #080);
background: linear-gradient(left, #fd5, #080);
}
svg {
width: 100%;
height: 100%;
}
.outer-wrapper {
width: 100%;
height: 100%;
background: #345;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-clip-path: url("#clip-path");
clip-path: url("#clip-path");
}
.content {
color: #fff;
text-align: center;
font-size: 48px;
line-height: 100px;
width: calc(100% - 2px);
height: calc(100% - 2px);
background: #345;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inner {
width: 100%;
height: 100%;
background: #333;
position: absolute;
top: 50%;
left: 50%;
background: -webkit-linear-gradient(left, #fd5, #080);
background: linear-gradient(left, #fd5, #080);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-clip-path: url("#clip-path-inner");
clip-path: url("#clip-path-inner");
}
</style>
</head>
<body>
<div class="main">
<div class="wrapper">
<div class="content">
Title
<div class="inner">
<svg>
<defs>
<clipPath id="clip-path-inner">
<circle cx="0" cy="0" r="10"></circle>
<circle cx="0" cy="100%" r="10"></circle>
<circle cx="100%" cy="0" r="10"></circle>
<circle cx="100%" cy="100%" r="10"></circle>
</clipPath>
</defs>
</svg>
</div>
</div>
<div class="outer-wrapper"></div>
<svg>
<defs>
<clipPath id="clip-path">
<circle cx="0" cy="0" r="10"></circle>
<circle cx="0" cy="100%" r="10"></circle>
<circle cx="100%" cy="0" r="10"></circle>
<circle cx="100%" cy="100%" r="10"></circle>
</clipPath>
</defs>
</svg>
</div>
</div>
</body>
</html>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu