使用CSS3 border-image和SVG实现的美丽边界图形

Border-image + SVG shapes

css3, border

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2771
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.box--1 {
    border: 3rem solid transparent;
    -webkit-border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10'  width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='1 3'/%3E%0A%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='orangered' stroke-width='5' stroke-dasharray='.8 2.5'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='gold' stroke-width='5' stroke-dasharray='.6 2'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='yellowgreen' stroke-width='5' stroke-dasharray='.4 1.5'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='teal' stroke-width='5' stroke-dasharray='.25 1'/%3E%3C/svg%3E") 25%;
    -o-border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10'  width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='1 3'/%3E%0A%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='orangered' stroke-width='5' stroke-dasharray='.8 2.5'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='gold' stroke-width='5' stroke-dasharray='.6 2'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='yellowgreen' stroke-width='5' stroke-dasharray='.4 1.5'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='teal' stroke-width='5' stroke-dasharray='.25 1'/%3E%3C/svg%3E") 25%;
    border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10'  width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='1 3'/%3E%0A%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='orangered' stroke-width='5' stroke-dasharray='.8 2.5'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='gold' stroke-width='5' stroke-dasharray='.6 2'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='yellowgreen' stroke-width='5' stroke-dasharray='.4 1.5'/%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' fill='none' stroke='teal' stroke-width='5' stroke-dasharray='.25 1'/%3E%3C/svg%3E") 25%;
}
.box--2 {
    border: 3rem solid transparent;
    -webkit-border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='100' height='100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%0A    %3Cg transform='translate%280,.21%29 rotate%2845, .5 .5%29'%3E%0A %3Crect width='70%25' height='70%25'%0A fill='crimson'%3E%3C/rect%3E%0A %3Crect width='60%25' height='60%25'%0A fill='orangered'%0A x='5%25' y='5%25'%3E%3C/rect%3E %0A %3Crect width='50%25' height='50%25'%0A fill='gold'%0A x='10%25' y='10%25'%3E%3C/rect%3E %0A %3Crect width='40%25' height='40%25'%0A fill='darkturquoise'%0A x='15%25' y='15%25'%3E%3C/rect%3E %0A %3Crect width='30%25' height='30%25'%0A fill='teal'%0A x='20%25' y='20%25'%3E%3C/rect%3E%0A %3Crect width='21%25' height='21%25'%0A fill='white'%0A x='24.5%25' y='24.5%25'%3E%3C/rect%3E%0A %3C/g%3E%0A%3C/svg%3E") 43% fill;
    -o-border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='100' height='100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%0A    %3Cg transform='translate%280,.21%29 rotate%2845, .5 .5%29'%3E%0A %3Crect width='70%25' height='70%25'%0A fill='crimson'%3E%3C/rect%3E%0A %3Crect width='60%25' height='60%25'%0A fill='orangered'%0A x='5%25' y='5%25'%3E%3C/rect%3E %0A %3Crect width='50%25' height='50%25'%0A fill='gold'%0A x='10%25' y='10%25'%3E%3C/rect%3E %0A %3Crect width='40%25' height='40%25'%0A fill='darkturquoise'%0A x='15%25' y='15%25'%3E%3C/rect%3E %0A %3Crect width='30%25' height='30%25'%0A fill='teal'%0A x='20%25' y='20%25'%3E%3C/rect%3E%0A %3Crect width='21%25' height='21%25'%0A fill='white'%0A x='24.5%25' y='24.5%25'%3E%3C/rect%3E%0A %3C/g%3E%0A%3C/svg%3E") 43% fill;
    border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='100' height='100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%0A    %3Cg transform='translate%280,.21%29 rotate%2845, .5 .5%29'%3E%0A %3Crect width='70%25' height='70%25'%0A fill='crimson'%3E%3C/rect%3E%0A %3Crect width='60%25' height='60%25'%0A fill='orangered'%0A x='5%25' y='5%25'%3E%3C/rect%3E %0A %3Crect width='50%25' height='50%25'%0A fill='gold'%0A x='10%25' y='10%25'%3E%3C/rect%3E %0A %3Crect width='40%25' height='40%25'%0A fill='darkturquoise'%0A x='15%25' y='15%25'%3E%3C/rect%3E %0A %3Crect width='30%25' height='30%25'%0A fill='teal'%0A x='20%25' y='20%25'%3E%3C/rect%3E%0A %3Crect width='21%25' height='21%25'%0A fill='white'%0A x='24.5%25' y='24.5%25'%3E%3C/rect%3E%0A %3C/g%3E%0A%3C/svg%3E") 43% fill;
    border-image-repeat: round;
}
.box--3 {
    border: 3rem solid transparent;
    -webkit-border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E    %0A    %3Ccircle r='50%25' cx='50%25' cy='50%25' fill='crimson'/%3E%0A    %3Ccircle r='45%25' cx='50%25' cy='50%25' fill='orangered'/%3E%0A    %3Ccircle r='40%25' cx='50%25' cy='50%25' fill='gold'/%3E%0A    %3Ccircle r='35%25' cx='50%25' cy='50%25' fill='darkturquoise'/%3E%0A    %3Ccircle r='30%25' cx='50%25' cy='50%25' fill='teal'/%3E%0A    %3Ccircle r='25%25' cx='50%25' cy='50%25' fill='white'/%3E%0A%3C/svg%3E") 33% fill;
    -o-border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E    %0A    %3Ccircle r='50%25' cx='50%25' cy='50%25' fill='crimson'/%3E%0A    %3Ccircle r='45%25' cx='50%25' cy='50%25' fill='orangered'/%3E%0A    %3Ccircle r='40%25' cx='50%25' cy='50%25' fill='gold'/%3E%0A    %3Ccircle r='35%25' cx='50%25' cy='50%25' fill='darkturquoise'/%3E%0A    %3Ccircle r='30%25' cx='50%25' cy='50%25' fill='teal'/%3E%0A    %3Ccircle r='25%25' cx='50%25' cy='50%25' fill='white'/%3E%0A%3C/svg%3E") 33% fill;
    border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E    %0A    %3Ccircle r='50%25' cx='50%25' cy='50%25' fill='crimson'/%3E%0A    %3Ccircle r='45%25' cx='50%25' cy='50%25' fill='orangered'/%3E%0A    %3Ccircle r='40%25' cx='50%25' cy='50%25' fill='gold'/%3E%0A    %3Ccircle r='35%25' cx='50%25' cy='50%25' fill='darkturquoise'/%3E%0A    %3Ccircle r='30%25' cx='50%25' cy='50%25' fill='teal'/%3E%0A    %3Ccircle r='25%25' cx='50%25' cy='50%25' fill='white'/%3E%0A%3C/svg%3E") 33% fill;
    border-image-repeat: round;
}
.box--4 {
    border: 3rem solid transparent;
    -webkit-border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='100' height='100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%0A  %3ClinearGradient id='grad'%0A   gradientTransform='rotate%28-45 .5 .5%29'%3E%0A   %3Cstop stop-color='crimson' offset='0%25'%3E%3C/stop%3E%0A   %3Cstop stop-color='gold' offset='50%25'%3E%3C/stop%3E%0A   %3Cstop stop-color='teal' offset='100%25'%3E%3C/stop%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--2' xlink:href='%23grad' gradientTransform='rotate%28-135 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--3' xlink:href='%23grad' gradientTransform='rotate%28-230 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--4' xlink:href='%23grad' gradientTransform='rotate%2845 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3Crect width='50%25' height='50%25'%0A  fill='url%28%23grad%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  x='50%25'%0A  fill='url%28%23grad--2%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  x='50%25' y='50%25'%0A  fill='url%28%23grad--3%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  y='50%25'%0A  fill='url%28%23grad--4%29'%3E%3C/rect%3E%0A%3C/svg%3E") 5%;
    -o-border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='100' height='100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%0A  %3ClinearGradient id='grad'%0A   gradientTransform='rotate%28-45 .5 .5%29'%3E%0A   %3Cstop stop-color='crimson' offset='0%25'%3E%3C/stop%3E%0A   %3Cstop stop-color='gold' offset='50%25'%3E%3C/stop%3E%0A   %3Cstop stop-color='teal' offset='100%25'%3E%3C/stop%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--2' xlink:href='%23grad' gradientTransform='rotate%28-135 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--3' xlink:href='%23grad' gradientTransform='rotate%28-230 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--4' xlink:href='%23grad' gradientTransform='rotate%2845 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3Crect width='50%25' height='50%25'%0A  fill='url%28%23grad%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  x='50%25'%0A  fill='url%28%23grad--2%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  x='50%25' y='50%25'%0A  fill='url%28%23grad--3%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  y='50%25'%0A  fill='url%28%23grad--4%29'%3E%3C/rect%3E%0A%3C/svg%3E") 5%;
    border-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='100' height='100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%0A  %3ClinearGradient id='grad'%0A   gradientTransform='rotate%28-45 .5 .5%29'%3E%0A   %3Cstop stop-color='crimson' offset='0%25'%3E%3C/stop%3E%0A   %3Cstop stop-color='gold' offset='50%25'%3E%3C/stop%3E%0A   %3Cstop stop-color='teal' offset='100%25'%3E%3C/stop%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--2' xlink:href='%23grad' gradientTransform='rotate%28-135 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--3' xlink:href='%23grad' gradientTransform='rotate%28-230 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3ClinearGradient id='grad--4' xlink:href='%23grad' gradientTransform='rotate%2845 .5 .5%29'%3E%0A %3C/linearGradient%3E%0A %3Crect width='50%25' height='50%25'%0A  fill='url%28%23grad%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  x='50%25'%0A  fill='url%28%23grad--2%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  x='50%25' y='50%25'%0A  fill='url%28%23grad--3%29'%3E%3C/rect%3E%0A %3Crect width='50%25' height='50%25'%0A  y='50%25'%0A  fill='url%28%23grad--4%29'%3E%3C/rect%3E%0A%3C/svg%3E") 5%;
}
/* Page styles */

HTML,
BODY {
    height: 100%;
}
BODY {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 51rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-linear-gradient(#DDD 1px, transparent 1px), -webkit-linear-gradient(0deg, #DDD 1px, transparent 1px);
    background: linear-gradient(#DDD 1px, transparent 1px), linear-gradient(90deg, #DDD 1px, transparent 1px);
    background-color: #fff;
    background-size: 1rem 1rem;
    text-align: center;
    font: 14px/1.4 Tahoma, sans-serif;
}
A {
    color: teal;
}
H1 {
    width: 100%;
    margin-bottom: .5em;
    font: 3rem/1.4 Georgia, serif;
}
svg {
    display: none;
    border: 1px solid red;
    width: 200px;
    height: 200px;
}
.l-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 44rem;
    margin: 2rem;
}
.box {
    position: relative;
    margin: 1rem;
    width: 20rem;
    height: 13rem;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
}
.link {
    width: 100%;
    margin-top: 1rem;
}

HTML

<div class="link">More borders: <a href="https://codepen.io/yoksel/pen/bwNRxb" target="_blank">Border-image + CSS Gradients</a>
    </div>
</div>

Border-image + SVG shapes

css3, border

编辑器支持Emmet

快捷键

Border-image + SVG shapes

css3, border

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

6个使用CSS3 transform-origin属性实现的方形翻转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：