卡卡網(wǎng)

傳統(tǒng)的灰色純色邊框你是不是覺得太難看了？你是否想設計一些精美的邊框，例如漸變、圓角、彩色的邊框？那你來對地方了，本文將介紹如何用純CSS就能實現(xiàn)具有漸變和圓角的彩色邊框。

1、使用“border-image”屬性

“border-image”屬性是創(chuàng)建漸變邊框的正確方法。

HTML

<div class="gradient-border -using-border-image">

</div>

該漸變邊框使用了 gradient-border 和 -using-border-image 兩個CSS屬性。

CSS

.gradient-border {
  --color-1: rebeccapurple;
  --color-2: crimson;
  --border-radius: 1.25rem;
  --border-width: 0.5rem;
  width: 100%;
  padding: 2rem;
  position: relative;
  border-radius: var(--border-radius);
}
.gradient-border * + * {
  margin-top: 0.5rem;
}
.gradient-border.-using-border-image {
  border-width: var(--border-width);
  border-style: solid;
  -o-border-image: linear-gradient(135deg, var(--color-1), var(--color-2)) 1 stretch;
     border-image: linear-gradient(135deg, var(--color-1), var(--color-2)) 1 stretch;
}

demodownload

2、使用clip-path屬性

我們可以使用clip-path屬性來畫圓角，但內(nèi)角保持方形。

HTML

<div class="gradient-border -using-border-image -using-clip-path">

</div>

該漸變邊框除了使用了 gradient-border 和 -using-border-image 外，還用了一個 -using-clip-path 的CSS屬性。

CSS

.gradient-border.-using-clip-path {
  -webkit-clip-path: inset(0px round var(--border-radius));
          clip-path: inset(0px round var(--border-radius));
}

demodownload

3、使用偽元素

一個既有漸變又有半徑的漂亮邊框需要多一點CSS（和一個偽元素）。

HTML

<div class="gradient-border -using-pseudo-element">

</div>

該漸變圓角邊框使用了偽元素（pseudo-element）來實現(xiàn)。

CSS

.gradient-border.-using-pseudo-element {
  position: relative;
  padding: calc(2rem + var(--border-width));
  border-radius: var(--border-radius);
  background-image: linear-gradient(135deg, var(--color-1), var(--color-2));
}
.gradient-border.-using-pseudo-element * {
  position: relative;
  z-index: 1;
}
.gradient-border.-using-pseudo-element::after {
  content: "";
  display: block;
  position: absolute;
  top: var(--border-width);
  right: var(--border-width);
  bottom: var(--border-width);
  left: var(--border-width);
  border-radius: calc(var(--border-radius) - var(--border-width));
  background-color: var(--background);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

demodownload

標簽: css3  css  漸變邊框  邊框  border