1.html结构

<div class="card">test</div>

2.css样式

.card{
  position: relative;
  padding: 30px;
  width: 300px;
  height: 400px;
  border: 1px solid transparent;
  box-shadow: 0 5px 10px 5px hsla(0,0%,74.9%,.2);
  border-radius: 8px;
  background: #fff;
  background-clip: padding-box;
}
.card:after{
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    background: linear-gradient(45deg,#19a754,#0685b1);
    border-radius: 8px;
    z-index: -1;
}

css 相关

input 中checkbox样式 PC端适配屏幕尺寸 css3 打字渐变效果 css3 模拟正负条形图 css3 美化滚动条 css 颜色值 css3 border 圆角 渐变 css 纯css tooltips