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

最新推荐文章于 2023-09-11 10:09:47 发布

小茂不小

最新推荐文章于 2023-09-11 10:09:47 发布

阅读量402

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/xms_can_fly/article/details/125488065

版权

一、两头细中间粗的线

在这里插入图片描述

<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%;
}