css使用技巧二

该系列所有的技巧都来至于 《css揭秘》 提取码：9x8n

形状

1. 半椭圆

border-radius 可以用 / 进行分割，前面设置x方向，后面设置y方向，有一个角设置为0那么这个角就将没有弧度

.wrapper {
  width: 100px;
  height: 100px;
  background-color: rgb(245, 150, 166);
  border-radius: 50% / 100% 100% 0 0; /* 相当于 50% 50% 50% 50% / 100% 100% 0 0 */
}

效果

2. 1/4椭圆

将 border-radius 的其中三个角设置为 0

.wrapper {
  width: 80px;
  height: 100px;
  background-color: rgb(245, 150, 166);
  border-radius: 100% 0 0 0;
}

效果

3. 平行四边形

transform: skewX(-45deg) + 伪元素

采用伪元素的原因是为了避免内容也发生变形

.wrapper {
  position: relative;
  width: 140px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.wrapper::after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* 将背景至于内容的后面 */
  transform: skewX(-45deg);
  background-color: rgb(245, 150, 166);
}

效果

4. 菱形

clip-path 进行裁剪，分别设置每个角对应的百分比坐标

.wrapper {
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background-color: rgb(245, 150, 166);
}

效果

5. 切角效果

linear-gradient 由透明进行过渡

.wrapper {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, transparent 15px, #f596a6 0) top left/50% 50%,
    linear-gradient(-135deg, transparent 15px, #f596a6 0) top right/50% 50%,
    linear-gradient(-45deg, transparent 15px, #f596a6 0) bottom right/50% 50%,
    linear-gradient(45deg, transparent 15px, #f596a6 0) bottom left/50% 50%;
  background-repeat: no-repeat;
}

效果

6. 简易饼图

conic-gradient

.pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(pink 20%, #f596a6 0, #f596a6 30%, rgb(230, 59, 82) 0)
}

效果

7. 三角形

将元素的每条边都设置成不同的颜色,那么每条边相交的地方就会有一个 45 度的分界线，当元素的长度都设置为 0 时，那么该元素最终的呈现将是 4 个三角形，然后将其中三边都设置成透明的就行

(另外的思路：通过 linear-gradient 进行设置)

.wrapper {
  width: 0;
  border-color: #f596a6 rgba(245, 150, 166, .1) rgba(245, 150, 166, .2) rgba(245, 150, 166, .3);
  border-width: 50px;
  border-style: solid;
}

效果

视觉效果

1. 投影

1-1 单侧投影

box-shadow 第4个参数设置为负数，将向里面进行收缩

.wrapper {
  width: 100px;
  height: 100px;
  background-color: pink;
  box-shadow: 0 5px 4px -4px #630d1d;
}

效果

1-2 领边投影

.wrapper {
  width: 100px;
  height: 100px;
  background-color: pink;
  box-shadow: 3px 3px 6px -3px #630d1d;
}

效果

1-3 双侧投影

应用两次单边投影

.wrapper {
  width: 100px;
  height: 100px;
  background-color: pink;
  box-shadow: 5px 0 4px -4px #630d1d, -5px 0 4px -4px #630d1d;
}

效果

1-4 不规则投影

filter: drop-shadow

主要是为了解决 box-shadow 无法直接作用于伪元素，dotted border 等

.wrapper {
  width: 100px;
  height: 100px;
  border: dotted 10px #f596a6;
  filter: drop-shadow(2px 2px 3px #630d1d);
}

效果

2. 毛玻璃

filter: blur + background-attachment:fixed;

css部分

.box43 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 275px;
  background: url('./images/test.jpg') 0/cover fixed;
  /* background-attachment: fixed 图片不随着移动 */
}

.box43 .inner {
  position: relative;
  padding: 40px;
  overflow: hidden; /* 裁切多余的模糊 */
  
  border-radius: 5px;
  border: solid 1px hsla(0, 0%, 100%, .1);
  box-shadow: 0 0 15px rgba(0, 0, 0, .5);
  background-color: rgba(150, 150, 150, .3);
  box-shadow: 0 .5em 1em rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
}

.box43 .inner span {
  position: relative;
  z-index: 1; /* 避免被伪元素盖住 */
}

.box43 .inner::after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: -20px;/*由于高斯模糊后，边缘看上去透明度会比较高，所以将模糊效果进行补偿 */

  filter: blur(20px);/* 高斯模糊20px */

  z-index: 0;

  background: url('./images/test.jpg') 0/cover fixed;
  /* 对一部分背景使用高斯模糊才会产生毛玻璃的效果 */
}

html部分

<div class="box43">
  <div class="inner">
    <span>这儿是一段毛玻璃测试</span>
  </div>
</div>

效果

3. 折角效果

3-1 45度折角

伪元素(作为阴影部位) + 绝对定位 + 背景渐变

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: pink;
  background: linear-gradient(to left bottom, transparent 1em, pink 0);
}

.wrapper::after {
  position: absolute;
  right: 0;
  top: 0;
  content: '';
  width: 1.4em; /* 1em * 1.414 */
  height: 1.4em;
  background: linear-gradient(to right top, rgb(170, 91, 104) 1em, transparent 0);
}

效果

3-2 任意角度折角

通过角度和距离计算出折角矩形的宽高，最终的效果最好以折线为对称中心

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: pink;
  background: linear-gradient(-150deg, transparent 1em, pink 0);
}

.wrapper::after {
  position: absolute;
  right: 0;
  top: 0;
  content: '';
  width: 2em;
  height: 1.15em;
  transform: rotate(60deg); /* 旋转对齐折线 */

  transform-origin: center center; /* 设置对称轴 */
  background: linear-gradient(to left top, rgb(170, 91, 104) 1em, transparent 0);
}

效果