CSS邊框效果 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　本文將詳細介紹CSS邊框效果

半透明邊框

  border:10px solid hsla(0, 0%, 100%,.5);
  background-clip:padding-box;

縫邊效果

  outline: 1px white dashed;
  outline-offset:-10px;
  border-radius:4%;
  background:#795548;

邊框內圓角

　　思路如下：為元素設置圓角，外層設置輪廓outline。圓角與直角之間的空隙用陰影補齊，陰影的尺寸為圓角半徑的一半

  border-radius:10px;
  background: tan;
  outline:10px solid #655;
  box-shadow:0 0 0 5px #655;

信封邊框

　　信封邊框有兩種實現思路：

　　1、使用背景漸變

  padding:1em;
  border: 1em solid transparent;
  background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

　　2、使用邊框圖片

  padding:1em;
  border: 1em solid transparent;
  border-image:repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em)  16;

　　效果如下

腳注效果

　　由于使用了currentColor，它會根據color屬性的變化而自動適應

  padding-top:1em;
  border-top: .2em solid transparent;
  border-image: 100% 0 0 linear-gradient(90deg,currentColor 4em,transparent 0);

螞蟻線

@keyframes ants{100%{background-position:100%;}}
div{
  width:200px;
  height: 70px;
  border: 1px solid transparent;
  background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em; 
  animation:ants 12s linear infinite;
}

文章列表