xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

CSS border gradient color All In One

CSS Gradient Borders

border-image-source & border-image-slice

font-family: system-ui;

button {
  background: none;
  text-decoration: inherit;
  font-family: system-ui;
  font-size: 1rem;
  padding: 1rem 2rem;
}

.border-gradient {
  // border: 5px solid;
  border- 5px;
  border-style: dashed;
}
.border-gradient-purple {
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
.border-gradient-green {
  border-image-source: linear-gradient(to left, #00C853, #B2FF59);
}
.border-image-slice{
  border-image-slice: 1;
}

CSS3 box-shadow : 4 sides symmetry

border-image: 
    border-image-source: linear-gradient(to left, rgb(116, 58, 213), rgb(213, 58, 157));
    border-image-slice: 100%;
    border-image- 1;
    border-image-outset: 0;
    border-image-repeat: stretch;

border: 10px solid;
    border-top-color: initial;
    border-top-style: solid;
    border-top- 5px;
    border-right-color: initial;
    border-right-style: solid;
    border-right- 5px;
    border-bottom-color: initial;
    border-bottom-style: solid;
    border-bottom- 5px;
    border-left-color: initial;
    border-left-style: solid;
    border-left- 5px;
    border-image-source: initial;
    border-image-slice: 1;
    border-image- initial;
    border-image-outset: initial;
    border-image-repeat: initial;


background: none;
    background-image: none;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;

1. background 模拟

https://codepen.io/xgqfrms/pen/OJMvZqz

2. border-image

https://codepen.io/xgqfrms/pen/oNbqdVL

https://codepen.io/xgqfrms/pen/GRoxdev

refs

https://css-tricks.com/gradient-borders-in-css/

https://stackoverflow.com/questions/2717127/gradient-borders

https://stackoverflow.com/questions/40557461/rainbow-gradient-on-text-in-css

https://www.hongkiat.com/blog/css-gradient-border/

https://www.w3schools.com/css/css3_gradients.asp

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---