? ??????? UI ?? ??? ????? ??? ???? ??? ??? ? ?? CSS ??? ?? ??? ???? ????? ????? ??? ??? ??? ??? ???????. ????? CSS ??? ?? @property? ???? ????? ????? ???? ?? ??? ??? ?? ???.

CSS Custom @property? ???? ??? ?? ? ???? ?????.

?? ?? ??

? ??????? React? ??? ??? ?? ??? ??? ????

import "./styles.css";

const CardAnimatedBorder = () => {
  return (
    <div className="container">
      <div className="card">This is a card with animated gradient border</div>
    </div>
  );
};

export default CardAnimatedBorder;

??? ?? ??? ????

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

??? ??? ???

????? ????? ???? ??? ?? ??? ???? ??? ??? ???????. CSS ??? ??? ???? ?? ?? ??? ?? ?? ::before ? ::after? ?????. ??? ? ?? ??? ??? ?? ??? ?? ??? ??? ? ?? ?????. ???? ?? ??? ??? ??? ???? Z-??? -1? ???.

.card::after,
.card::before {
  content: "";
  position: absolute;
  background: red;
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
}

?? ?? ??? ??? ?????

??? ?? ?? ?? --angle

????? ??? ???? ?? ??? ?? ??? ???????. ??? ?????? ???????.
?? ?? ??? ?? ??? ?????

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

CSS? ??? ?? ?????

• ?????? ????? ??? ?? ???? ?????.
• ??? ?? ?? ??? ????? ??? ?????.
• ??? ??????? ? ?? ??? ??? ??? ?????? ???? ?? ??? ??? ?????.
• ??? ??? ?? ?? ??? ????? ?????.

CSS? ??? ??? ???

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.card::after,
.card::before {
  content: "";
  position: absolute;
  background-image: conic-gradient(
    from var(--angle),
    transparent 70%,
    blue,
    red
  );
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
  animation: 2s spin linear infinite;
}

.card::before {
  filter: blur(1rem);
  opacity: 0.7;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

????? ????? ????? ???? ?? ??? ?????.

??

??? ?????

? ?????

• MDN ?? @property

?? ???

? ??? ????? ????? ???? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!