技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

純CSS實(shí)現(xiàn)具有漸變和圓角的彩色邊框

作者:admin    時(shí)間:2022-1-17 23:30:33    瀏覽:

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

1、使用“border-image”屬性

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

HTML

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

</div>

該漸變邊框使用了 gradient-border-using-border-image 兩個(gè)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 外,還用了一個(gè) -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、使用偽元素

一個(gè)既有漸變又有半徑的漂亮邊框需要多一點(diǎn)CSS(和一個(gè)偽元素)。

HTML

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

</div>

該漸變圓角邊框使用了偽元素(pseudo-element)來實(shí)現(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

 

標(biāo)簽: css3  css  漸變邊框  邊框  border  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */