css实现不同渐变边框效果-html代码-BFW代码库

css实现不同渐变边框效果

代码语言：html

代码描述：css实现不同渐变边框效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 60px;
  background: white;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 60px;
}

.border {
  font-size: 1.6rem;
  display: grid;
  place-items: center;
  min-height: 200px;
  border: 8px solid;
  padding: 1rem;
}

.full {
  border-image: linear-gradient(45deg, turquoise, greenyellow) 1;
}

.sides {
  border-image: linear-gradient(to left, turquoise, greenyellow) 1 0;
}

.sides-2 {
  border-image: linear-gradient(to bottom, turquoise, greenyellow) 0 1;
}

.linear-repeating {
  border-width: 10px;
  border-image: repeating-linear-gradient(45deg, turquoise, pink 4%) 1;
}

.radial-repeating {
  border-width: 20px;
  border-image: repeating-radial-gradient(circle at 10px, turquoise, pink 2px, greenyellow 4px, pink 2px) 1;
}

/* border radius example is drawn from this pen: https://codepen.io/shshaw/pen/MqMZGR
I've added a few comments on why we're using certain properties
*/
.full-withradius {
  position: relative;
  background: #fff;
  .........完整代码请登录后点击上方下载按钮下载查看