基础CSS 语法

background-image

CSSlinear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 gradient 数据类型，是一种特别的image数据类型。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

`radial-gradient()`[ gradient ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient)[image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/image)

background: radial-gradient(#e66465, #9198e5);

clip-path

clip-path

clip-pathCSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

示例：

<div class="bg rect-clip"></div>

<style>
  .rect-clip{
  background-image: url(./im.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 
    100% calc(100% - 15px), calc(100% - 15px) 100%,
    15px 100%, 0 calc(100% - 15px), 0 15px)
}

</style>

效果图：

---

具体实现示例

缺角

单个角

<div class="single-angle"></div>

<style>
  .single-angle{
    width:200px;
    height:200px;
    background: linear-gradient(-45deg, transparent 10px, #58a 0);
	}
</style>

多个角

<div class="bg rect"></div>

<style>
.rect{
  background: linear-gradient(135deg, transparent 10px, #58a 0) top left,
          linear-gradient(-135deg, transparent 10px, #58a 0) top right,
          linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,
          linear-gradient(45deg, transparent 10px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  /* Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。 */
}
</style>

<div class="bg cricle"></div>
<style>
	.cricle{
  background: radial-gradient(circle at top left, transparent 10px, #58a 0) top left,
          radial-gradient(circle at top right, transparent 10px, #58a 0) top right,
          radial-gradient(circle at bottom right, transparent 10px, #58a 0) bottom right,
          radial-gradient(circle at bottom left, transparent 10px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
</style>

弧形

<div class="bg clip5"></div>

<style>
  
 .clip5 {
 		clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
 }

.bg {
  width: 200px;
  height: 200px;
  background: blue
}

</style>

缺角边框

<div class="out-rect">
	<div class="in-rect"></div>
</div>

.out-rect {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 80px;
    padding: 5px;
    background: linear-gradient(-45deg, transparent 10px, #58a 0) top right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.in-rect{
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, transparent 8px, #fff 0) top right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


 clip-path: polygon(0 0, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 0px),
                    calc(100% - 0px) 100%, 0px 100%,0 calc(100% - 0px),0 0px);
 background:linear-gradient(-45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom right,
                linear-gradient(45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom left,
                linear-gradient(135deg,#4C829A 0px, rgba(216,236,255,0.05) 0) top left,
                linear-gradient(-135deg,#4C829A 10px,rgba(216,236,255,0.05) 0) top right;
background-repeat: no-repeat; 
 border: solid 1px #4C829A;

这段代码的要点实际上是通过backgroud加clip-path共同实现切角的边框。

clip-path切background形成一个窄的边线；

原文：https://blog.csdn.net/qq_28483283/article/details/108585992

折角

右上角折角

<div class="bg foldingAngle"></div>

.bg {
  width: 120px;
  height: 80px;
  background: #58a;
}

.foldingAngle {
  background: linear-gradient(
        to left bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.4) 0
      )
      no-repeat 100% 0 / 1.4em 1.4em,
    linear-gradient(-135deg, transparent 1em, #58a 0);
}

效果图

右下角折角

<div class="bg foldingAngle2"></div>

.foldingAngle2{
	background:
		linear-gradient(to left top, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 100% / 1.4em 1.4em,
	    linear-gradient(-45deg, transparent 1em, #58a 0);
}