边框一
.leftClass {
background: #000;
/* -webkit-animation: twinkling 1s infinite ease-in-out; 1秒钟的开始结束都慢的无限次动画 */
}
.leftClass::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(
var(--rotate)
, #1e2ce7, #0a0f90 43%, #03035a);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
animation: spin 2.5s linear infinite;
}
.leftClass::after {
position: absolute;
content: "";
top: calc(var(--card-height) / 6);
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.8);
filter: blur(calc(var(--card-height) / 6));
background-image: linear-gradient(
var(--rotate)
,#1e2ce7, #0a0f90 43%, #03035a);
opacity: 1;
transition: opacity .5s;
animation: spin 2.5s linear infinite;
}
.leftClass:hover {
color: rgb(88 199 250 / 100%);
transition: color 1s;
}
.leftClass:hover:before, .leftClass:hover:after {
animation: none;
opacity: 0;
}
边框二
```cpp
.leftClass {
width: 32%;
height: auto;
-webkit-animation: twinkling 1s infinite ease-in-out;
}
@-webkit-keyframes twinkling{
0% {
border-color: #240eea;
box-shadow: 0 0 10px rgba(29, 84, 237, 0.2), inset 0 0 10px rgba(13, 63, 201, 0.1), 0 1px 0 rgb(51, 68, 153);
}
100% {
border-color: rgb(44, 15, 206);
box-shadow: 0 0 25px rgba(29, 84, 237,.6), inset 0 0 15px rgba(13, 63, 201, 0.4), 0 1px 0 rgb(36, 21, 174);
}
}
边框三
div {
position: relative;
border: 1px solid #03A9F3;
&::before,
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
}
&::before {
top: -5px;
left: -5px;
border-top: 1px solid var(--borderColor);
border-left: 1px solid var(--borderColor);
}
&::after {
right: -5px;
bottom: -5px;
border-bottom: 1px solid var(--borderColor);
border-right: 1px solid var(--borderColor);
}
&:hover::before,
&:hover::after {
width: calc(100% + 9px);
height: calc(100% + 9px);
}
}
边框四
.leftClass {
width:300px;
height: 500px;
border: 2px solid #00a1ff;
border-radius: 8px;
box-shadow: rgba(0, 253, 219, 0.5) 0px 0px 20px inset;
background: linear-gradient(to left, #00fd15, #00fd15) left top no-repeat,
linear-gradient(to bottom, #00fd15, #00fd15) left top no-repeat,
linear-gradient(to left, #00fd15, #00fd15) right top no-repeat,
linear-gradient(to bottom, #00fd15, #00fd15) right top no-repeat,
linear-gradient(to left, #00fd15, #00fd15) left bottom no-repeat,
linear-gradient(to bottom, #00fd15, #00fd15) left bottom no-repeat,
linear-gradient(to left, #00fd15, #00fd15) right bottom no-repeat,
linear-gradient(to left, #00fd15, #00fd15) right bottom no-repeat;
background-size: 0.5px 10px, 10px 1px, 1px 10px, 10px 1px;
}
.leftClass::before {
position: absolute;
content: "";
top: -2px;
bottom: -2px;
left: 30px;
width: calc(100% - 60px);
border-top: 2px solid #016886;
border-bottom: 2px solid #016886;
z-index: 0;
}
.leftClass::after {
position: absolute;
content: "";
top: 30px;
right: -2px;
left: -2px;
height: calc(100% - 60px);
border-right: 2px solid #016886;
border-left: 2px solid #016886;
z-index: 0;
}
边框五 流星(边框看着是动起来的)
<div>
<i class="top"></i><i class="bottom"></i>
</div>
.leftClass {
width: 32%;
height: auto;
border: 1px solid #121f71;
overflow: hidden;
i {
position: absolute;
display: inline-block;
height: 4px;
width: 100%;
}
.bottom {
bottom: 0;
left: -100%;
background-image: linear-gradient(
270deg,
transparent,
#74efff,
transparent
);
animation: one 4s linear 1s infinite;
}
.top {
top: 0;
right: -100%;
background-image: linear-gradient(
270deg,
transparent,
#74efff,
transparent
);
animation: three 4s linear 3s infinite;
}
}
.leftClass::before {
content: ' ';
position: absolute;
width: 4px;
height: 100%;
top: -100%;
left: 0;
background-image: linear-gradient(
0deg,
transparent,
#74efff,
transparent
);
animation: two 4s linear infinite;
}
.leftClass::after {
content: ' ';
position: absolute;
width: 4px;
height: 100%;
bottom: -100%;
right: 0;
background-image: linear-gradient(
360deg,
transparent,
#74efff,
transparent
);
animation: four 4s linear 2s infinite;
}
@keyframes one {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
@keyframes two {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
@keyframes three {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
@keyframes four {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
边框六
:root {
--bg: #222;
}
div {
width: 100px;
height: 100px;
border: 2px solid transparent;
background-image: linear-gradient(var(--bg), var(--bg)),
linear-gradient(180deg, red, orange);
/* 前一个为内容背景色,后面为边框渐变色 */
background-origin: border-box;
background-clip: content-box, border-box;
border-radius: 0px;
animation: 2s toBorder linear infinite alternate;
}
@keyframes toBorder {
100% {
border-radius: 50%;
}
}
边框七
#round {
border: 10px solid transparent;
margin: 300;
width: 600px;
height: 500px;
background-image: linear-gradient(rgba(33, 204, 251, 0.3), rgba(33, 204, 251, 0.9), rgba(33, 204, 251, 0.3));
border-image: url(img/45.png) 8 stretch;
/* border-image-slice: 40 15 15 15; */
/* border-image-repeat: stretch; */
}
边框八
<div class="dialog">
+<span class="dialog-rect"></span>
<div class="box flex-row j_c">CSS 实现不规则边框(2)</div>
</div>
.dialogDiv {
position: absolute;
padding: 15px;
padding-bottom: 25px;
width: 230px;
min-height: 250px;
z-index: 99;
background-repeat: no-repeat;
background-size: 100% 100%;
color: #fff;
&::after {
content: "";
border: 3px solid #32c5ff;
width: 40%;
height: 70%;
position: absolute;
left: -1px;
top: -1px;
z-index: 1;
border-right: none;
border-bottom: none;
border-radius: 6px 0 0 0;
}
.box::after {
content: "";
width: calc(100% - 4px);
height: calc(100% - 4px);
position: absolute;
/* 定义背景色 */
background: linear-gradient(181deg, #021734 0%, #3d1328 100%);
/* 水平垂直 居中 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
/* 添加圆角 */
border-radius: 4px;
}
.dialog-rect {
width: 80%;
height: 90%;
position: absolute;
right: -8px;
bottom: -8px;
border-radius: 6px;
background: #66b5f3;
clip-path: polygon(
0 0,
calc(100% - 10px) 0,
100% 10px,
100% 100%,
10px 100%,
0 calc(100% - 10px)
);
z-index: -2;
}
.dialog-rect::after {
content: "";
position: absolute;
width: calc(100% - 3px);
height: calc(100% - 3px);
/* 水平垂直 居中 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
background: #093258;
border-radius: 4px;
clip-path: polygon(
0 0,
calc(100% - 10px) 0,
100% 10px,
100% 100%,
10px 100%,
0 calc(100% - 10px)
);
}
.dialog::after {
content: "";
border: 3px solid #32c5ff;
width: 40%;
height: 70%;
position: absolute;
left: -1px;
top: -1px;
z-index: 1;
border-right: none;
border-bottom: none;
border-radius: 6px 0 0 0;
}
}
边框九(4边的线条是动起来的)
<div class="dialogDiv">
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
.dialogDiv {
position: absolute;
padding: 15px;
padding-bottom: 25px;
width: 230px;
height: 230px;
z-index: 99;
background-repeat: no-repeat;
background-size: 100% 100%;
color: #fff;
.dialogTitle {
padding: 8% 0px 0px 0;
color: #558FFF;
font-size: 1rem;
}
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: #111845a6;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgb(23, 32, 90);
border: 2px solid #2a3cad;
color: white;
padding: 20px;
}
.box:before{
content: '';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background: rgba(255,255,255,0.1);
transition:0.5s;
pointer-events: none;
}
.box:hover:before{
left:-50%;
transform: skewX(-5deg);
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1)
{
transform:rotate(0deg);
}
.box span:nth-child(2)
{
transform:rotate(90deg);
}
.box span:nth-child(3)
{
transform:rotate(180deg);
}
.box span:nth-child(4)
{
transform:rotate(270deg);
}
.box span:before
{
content: '';
position: absolute;
width:100%;
height: 2px;
background: #50dfdb;
animation: animate 4s linear infinite;
}
@keyframes animate {
0% {
transform:scaleX(0);
transform-origin: left;
}
50%
{
transform:scaleX(1);
transform-origin: left;
}
50.1%
{
transform:scaleX(1);
transform-origin: right;
}
100%
{
transform:scaleX(0);
transform-origin: right;
}
}
边框9
<div class="corp-title-text">
<div class="corp-title-text2">
</div>
</div>
.corp-title-text{
min-width: 210px;
height: 100%;
position: relative;
top: -4px;
background: #4FA6E5;
border-bottom: 1px solid #4FA6E5;
clip-path:polygon(0 0, 10px 100%,calc(100% - 10px) 100%,100% 0);
box-sizing: border-box;
}
.corp-title-text2{
padding: 0 20px;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #082F4C;
clip-path:polygon(1px 0, 11px 100%,calc(100% - 11px) 100%,calc(100% - 1px) 0);
}
边框10
.mo-di-mqn{
width: 179px;
height: 34px;
position: relative;
clip-path:polygon(8px 0%, 0% 8px,20px 100%,calc(100% - 20px) 100%,100% 8px,calc(100% - 8px) 0%);
background:linear-gradient(RGBA(42, 60, 115, 1),rgba(239, 0, 4, 0.4)),
repeating-linear-gradient(125deg,#D20A16,#D20A16 10px,#A30F1E 0,#A30F1E 20px);
}
.mo-di-mqn:before{
width: 25px;
height: 34px;
content: ' ';
position: absolute;
left: 0;
top: 0;
clip-path:polygon(8px 0%, 0% 8px,20px 100%,25px 100%,5px 8px,13px 0%);
background: linear-gradient(RGBA(215, 8, 18, 0.4),RGBA(215, 8, 18, 1));
}
.mo-di-mqn:after{
width: 25px;
height: 34px;
content: ' ';
position: absolute;
right: 0;
top: 0;
clip-path:polygon(calc(100% - 13px) 0%, calc(100% - 5px) 8px,0% 100%,5px 100%,100% 8px,calc(100% - 5px) 0%);
background: linear-gradient(RGBA(215, 8, 18, 0.4),RGBA(215, 8, 18, 1));
}
动画
div{
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(180deg, red, orange);
}
div::after {
content: "";
position: absolute;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: #222;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
其他好看的
https://www.php.cn/faq/484335.html