【css】一些奇奇怪怪的css样式问题

一、两头细中间粗的线

<div class="box"></div>

.box{
    width: 20%;
    height: 2px;
    background: -webkit-linear-gradient(
      244deg,
      rgba(255, 255, 255, 0) 0%,
      #2473fb 50%,
      rgba(255, 255, 255, 0) 100%
    );
}

二、多变形画法

1.使用属性cli-path，cli-path生成器

2.利用border属性

三角形 {
  width: 0;
  height: 0;
  background-color: transparent;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
  border-right: 50px solid chocolate;
}

梯形 {
  border-top: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #000;
  border-left: 30px solid transparent;
}

三、背景图片自适应铺满全屏

.box {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}