浅谈《年度盛典》后，对胡里花哨的样式爱恨情仇

[hanyitim]

年度盛典，作为一年一次的一个活动，除了包含复制的活动逻辑之外，就是“视觉盛宴”了，设计大佬毫不吝啬的用上各种“高级”的设计元素，然后前端死在了css的苦海里边

在一些样式上，如果能用css在实现个人觉得是更优的一个选择，相比于通过图片来呈现

[hanyitim]

边框渐变色（圆角）

方式一：

• 父盒子设置渐变背景+border-box+透明边框+圆角
• before伪元素设置白色背景+z-index:-1,让before在内容下面，父盒子上面（父盒子需要形成层叠上下文）

codepen地址

//html
<div class="box">
  <img src="https://www.lizhi.fm/images/downloadapp-banner-02.jpg" />
</div>

//less
.box{
  margin-top:50px;
  width:100px;
  height:100px;
  background:linear-gradient(to top, #851afd, #fd04fb 74%, #ffaa00 0%);
  border-radius:50px;
  position:relative;
  overflow:hidden;
  z-index:0;
  border:3px solid transparent;
  box-sizing:border-box;
  &:before{
    position:absolute;
    content:'';
    display:block;
    left:0;
    right:0;
    top:0;
    bottom:0;
    border-radius:50%;
    background-color:#fff;
    z-index:-1;
  }
  img{
    width:100%;
    height:100%;
  }
}

[hanyitim]

字体渐变

方式一：

• 设置盒子的背景颜色为渐变，然后通过background-clip:text 来设置基于text裁剪
• 设置字体为透明，color || text-fill-color

备注：优先使用color去控制，text-fill-color属于非标准属性

codepen地址

//html
<div class="box">
  <span class="contain">渐变文字内容</span>
</div>

//less
.contain{
    display: inline-block;
    background-image: linear-gradient(to right, #FD4281,#ff9f00 99%);
    background-clip: text;
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; //or color:transparent
}

[hanyitim]

不规则图形

一、平行四边形

方式：transform:skew(-45deg)

skew() 函数定义了一个元素在二维平面上的倾斜转换，这种转换是一种剪切映射（横切），它在水平和垂直方向上将单元内的每个点就去一定的角度，每个点的坐标根据指定的角度已经到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大

//html
<div class="box box1">
  我是内容
</div>

//css
.box{
  width:150px;
  height:50px;
  line-height:50px;
  text-align:center;
  position:relative;
  z-index:0;
  margin:50px;
}
.box1{
  transform:skew(-45deg);
  background:pink;
}

以上的写法会导致里面的内容也会变形,换个做法，在box里面添加一个伪元素去设置背景+skew(-45deg);

//html
<div class="box box2">
  我是内容
</div>

//css
.box2:before{
  background:pink;
  content:'';
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:-1;
  transform:skew(-45deg);
}

在设置不规则形状的时候，为了保证内容不受影响，可以通过伪元素来去实现

二、梯形

1. 等腰梯形

方式：

• 基于x轴旋转，rotate3d
• 设置透视,perspctive

perspctive() css属性得到三维定位的元素的一些透视在z=0平面和用户之间的距离。perspctive z>0 的每个3D元素都会变大；z<0的每个3D的元素都会变小

codepend地址

//html
<div class="box box1">
  我是内容
</div>

//css
.box{
  width:150px;
  height:50px;
  line-height:50px;
  text-align:center;
  position:relative;
  z-index:0;
  margin:50px;
}
.box1:before{
  background:pink;
  content:'';
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:-1;
  transform:perspective(100px) rotate3d(1,0,0,10deg);
}

2.直角梯形

方式一(有透明的问题)：

• 设置background
• 伪元素盖着一边

//html 
<div class='box box3'>直角梯形2</div>

//less
.box3{
  background:pink;
  position:relative;
  z-index:0;
  &:before{
    content:'';
    border:25px solid transparent;
    border-left-color:#fff;
    border-bottom-color:#fff;
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:0;
    z-index:-1;
  }
}

方式二：

• 通过 linear-gradient

//html
<div class='box box2'>直角梯形1</div>
//less
.box2{
  background:pink;
  background:linear-gradient(45deg,transparent 35px,pink 0)
}

菱形

方式一：

• 父盒子，旋转45deg
• 子元素，旋转-45deg

//html
<div class='box box1'>
  <img src='https://www.lizhi.fm/images/downloadapp-banner-02.jpg' />
</div>

//less
.box{
  width:100px;
  height:100px;
  margin:50px;
  overflow:hidden;
  img{
    width:100%;
    height:100%;
  }
}
.box1{
  transform:rotate(45deg);
  img{
    transform:rotate(-45deg) scale3d(1.42,1.42,1);
  }
}

方式二：

• clip-path