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

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

  Email
  

.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