前端开发实际项目中常见的实用技巧

CSS filter

.logo1 {
   
  /* 设置阴影 */
  filter: drop-shadow(1px 1px 10px #333);
}
.title {
   
  /* 设置模糊度，值越大，越模糊*/
  filter: blur(1px);
}
.logo2 {
   
  /* 设置对比度，值越大，对比度越大 */
  filter: contrast(10);
}
.logo3 {
   
  /* 设置制灰程度，常用于一些特殊日子 */
  filter: grayscale(1);
}

CSS focus-within

<div class="form-group">
  <label for="login-email">Email</label>
  <input
    type="email"
    id="login-email"
    class="form-control"
    placeholder="Email"
    data-required
  />
</div>

.form-group:focus-within {
   
  /* 当前元素以及它的后代元素如果聚焦，则给它增加背景颜色 */
  background: #eee;
}

CSS :has()

/* 表示：form-group下面的label的兄弟元素中，如果包含属性data-required，则给label增加红色星号，表示必填 */
.form-group label:has(+ input[data-required])::after {
   
  content: "*";
  color: red;
}

CSS aspect-ratio

.item {
   
  background: #f40;
  width: 400px;
  margin: 0 auto;
  /* 保持元素宽高比 */
  aspect-ratio: 4/3;
}

利用弹性盒布局+margin+变量来实现下图效果

ol {
   
  padding: 10px;
  background: #eee;
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}
ol li {
   
  margin: 10px;
  width: 64px;
  height: 64px;
  text-align: center;
  line-height: 64px;
  background: pink;
  border: 3px solid #333;
  --n: 6;
  --space: calc(100% - var(--n) * 50px);
  --h: calc(var(--space) / var(--n) / 2);
  margin: 10px var(--h);
}

CSS vmin

需求：图片全屏展示，不能出现滚动条

img{
   
	/* vmin：取视口最短边 */
	/* vmax：取 视口最长边*/
	width: 100vmin;
	height: 100vmin;
}

CSS fit-content

<div class="text">
  <span>2023-05-10</span