彩色边框圆形
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彩色边框旋转圆形</title>
</head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f1f1f1;
}
.loader {
position: relative;
width: 350px;
height: 350px;
border-radius: 50%;
background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
animation: animate 1.2s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader span {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
}
.loader span:nth-child(1) {
filter: blur(5px);
}
.loader span:nth-child(2) {
filter: blur(10px);
}
.loader span:nth-child(3) {
filter: blur(25px);
}
.loader span:nth-child(4) {
filter: blur(50px);
}
.loader:after {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #f1f1f1;
border: solid white 10px;
border-radius: 50%;
}
</style>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gradient Wheel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="loader"><span></span><span></span><span></span><span></span></div>
</body>
</html><!-- partial -->
</body>
</html>
不规则边框
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.bootstrapmb.com - Border for custom element</title>
</head>
<style>
@font-face {
font-family: 'Prata';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Prata Regular'), local('Prata-Regular'), url(https://fonts.gstatic.com/s/prata/v13/6xKhdSpbNNCT-vWI.ttf) format('truetype');
}
html {
font-family: 'Prata', serif;
line-height: 1.75;
}
body {
background: #f3e5ab;
}
.example {
position: relative;
display: block;
width: 50rem;
max-width: 90%;
margin: 4rem auto;
}
.example>.background {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-filter: drop-shadow(0 0 1rem #ba8e59);
filter: drop-shadow(0 0 1rem #ba8e59);
}
.example>.content {
position: relative;
z-index: 1;
padding: 15% 20%;
text-align: justify;
}
.example>.content .accent {
float: left;
line-height: 1.4;
padding: 0 1rem 0 0;
color: #619371;
font-size: 5rem;
}
.global-svg {
position: fixed;
pointer-events: none;
}
@media screen and (max-width: 600px) {
.example {
background: #fff;
}
.example>.background {
display: none;
}
.example>.content {
padding: 2rem;
}
}
</style>
<body>
<!-- partial:index.partial.html -->
<div class='example'>
<div class='content'>
<p><span class='accent'>L</span>orem ipsum dolor sit amet consectetur adipisicing elit. Tempora id magnam maiores
quod repellat vitae provident. Sequi id dolorem recusandae quos quo dolorum nihil culpa libero beatae debitis
explicabo suscipit fugit hic itaque temporibus, expedita rerum error obcaecati repudiandae dicta quas omnis
repellendus harum quis. Quaerat eius culpa doloribus nulla aliquam ducimus, quod error quos!</p>
<p>Consectetur minima alias maxime obcaecati est mollitia dolore tempore quas corrupti enim delectus in provident
ea architecto corporis magni possimus saepe similique ab, voluptate maiores quia accusantium beatae velit! Eos
facere asperiores quisquam doloribus optio minima itaque voluptatibus adipisci excepturi perferendis error, libero
ipsam suscipit, neque iure quidem, laudantium porro vero deleniti quod officia dicta! Architecto id fugit
laboriosam nobis nemo cupiditate dolor.</p>
</div>
<svg class='background' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>
<g filter='url(#separated-border)'>
<rect width='100%' height='100%' mask='url(#background-mask)' fill='#fff' />
</g>
</svg>
</div>
<svg class='global-svg' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>
<defs>
<mask id='background-mask'>
<rect width='100%' height='100%' fill='#000' />
<path d='m26.7 0.702c13.6 0.192 27.2 3.79 40.7 2.26 5.01-0.564 10-1.83 15-1.05 2.62 0.41 5.16 1.39 7.32 2.93 2.16 1.54 3.93 3.64 5.01 6.06 1.15 2.6 1.48 5.52 1.28 8.36-0.208 2.84-0.937 5.62-1.83 8.32-1.78 5.41-4.26 10.7-4.7 16.4-0.413 5.34 1.01 10.6 2.62 15.7 1.61 5.1 3.45 10.2 3.89 15.5 0.319 3.82-0.103 7.75-1.62 11.3-1.52 3.52-4.19 6.6-7.66 8.24-3.45 1.64-7.44 1.77-11.2 1.35s-7.53-1.35-11.3-1.73c-8.01-0.804-16 0.844-24 2.19-7.94 1.35-16.2 2.4-24 0.441-3.72-0.935-7.33-2.58-10.2-5.18s-4.83-6.2-5.07-10c-0.184-3.01 0.703-5.99 1.87-8.77 1.17-2.78 2.62-5.44 3.66-8.27 2.07-5.62 2.44-11.8 1.77-17.7-0.67-5.95-2.35-11.7-4.31-17.4-0.843-2.44-1.74-4.87-2.3-7.39-0.559-2.52-0.77-5.16-0.231-7.68 0.545-2.55 1.85-4.91 3.61-6.84 1.76-1.93 3.96-3.42 6.33-4.5 4.75-2.15 10.1-2.61 15.3-2.54z'
fill='#fff' />
</mask>
<filter id='separated-border'>
<feFlood flood-color='#86cb92' result='borderColor' />
<feComposite in='borderColor' in2='SourceAlpha' operator='in' result='borderShape' />
<feMorphology in='borderShape' operator='erode' radius='0.8' result='borderShapeIn' />
<feMorphology in='borderShape' operator='erode' radius='1' result='borderShapeOut' />
<feComposite in='borderShapeIn' in2='borderShapeOut' operator='out' result='borderStroke' />
<feMerge>
<feMergeNode in='SourceGraphic' />
<feMergeNode in='borderStroke' />
</feMerge>
</filter>
</defs>
</svg>
<!-- partial -->
</body>
</html>
