CSS高级技巧与实用伪类

前端微白
1 阅读16分钟

1. 多边框效果实现

使用box-shadow和outline属性实现多边框效果：

image.png

<div class="multi-borders">三重边框效果</div>

.multi-borders {
  position: relative;
  width: 200px;
  height: 100px;
  background: #f0f8ff;
  border: 2px solid #3498db;
  border-radius: 8px;
  margin: 20px auto;
  padding: 15px;
  text-align: center;
  
  /* 使用box-shadow创建两个边框 */
  box-shadow: 
    0 0 0 5px #f1c40f,
    0 0 0 10px #e74c3c;
  
  /* 使用outline创建第三个边框 */
  outline: 3px dashed #9b59b6;
}

2. 空链接显示URL

当<a>没有文本但href不为空时显示链接地址：

<a href="https://example.com"></a>
<a href="https://css-tricks.com">已有文本</a>
<a href="#"></a>

a[href]:not(:has(:not(br):not(wbr):not(span):visible))::after {
  content: "(" attr(href) ")";
  color: #e74c3c;
  font-weight: bold;
}

a[href="#"]::after {
  display: none;
}

3. text-rendering属性

text-rendering优化字体渲染方式：

image.png

<div class="optimize-legibility">optimizeLegibility</div>
<div class="geometric-precision">geometricPrecision</div>

.optimize-legibility {
  text-rendering: optimizeLegibility; /* 提升可读性 */
  font-size: 30px;
  margin: 15px;
}

.geometric-precision {
  text-rendering: geometricPrecision; /* 几何精度 */
  font-size: 30px;
  margin: 15px;
}

4. drop-shadow和box-shadow区别

image.png

<div class="box-shadow">box-shadow</div>
<div class="drop-shadow">drop-shadow</div>

.box-shadow, .drop-shadow {
  width: 120px;
  height: 120px;
  margin: 20px;
  display: inline-block;
  background-color: #3498db;
  position: relative;
}

.box-shadow::after {
  content: "";
  position: absolute;
  top: 150px;
  width: 100px;
  height: 20px;
  background: #2ecc71;
}

.box-shadow {
  /* 盒子阴影 */
  box-shadow: 5px 5px 5px #e74c3c;
}

.drop-shadow {
  /* 投影滤镜（贴合形状） */
  filter: drop-shadow(5px 5px 5px #e74c3c);
}

.drop-shadow::after {
  content: "";
  position: absolute;
  top: 150px;
  width: 100px;
  height: 20px;
  background: #2ecc71;
}

5. background-clip属性

image.png

<div class="clip-text">背景裁剪</div>
<div class="clip-border">边框剪裁</div>

.clip-text, .clip-border {
  margin: 20px;
  padding: 20px;
  border: 10px dotted #3498db;
}

.clip-text {
  background: linear-gradient(45deg, #1abc9c, #3498db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 32px;
  font-weight: bold;
}

.clip-border {
  background: #2ecc71;
  background-clip: padding-box; /* 背景仅出现在内边距区域 */
  height: 100px;
  width: 300px;
}

6. line-height-step属性理解

image.png

<p class="stepped">行高阶梯调整: 这是第一行<br>这是第二行<br>第三行内容稍长一些</p>

.stepped {
  line-height-step: 20px;
  font-size: 16px;
  border: 1px solid #ddd;
  padding: 10px;
  width: 300px;
}

7. :lang伪类使用

image.png

<p lang="en">This is English text</p>
<p lang="fr">Ceci est du texte français</p>
<p lang="es">Este es texto en español</p>

:lang(en) {
  font-family: Arial, sans-serif;
  color: #2980b9;
}

:lang(fr) {
  font-family: 'Times New Roman', serif;
  color: #e74c3c;
  font-style: italic;
}

:lang(es) {
  font-family: Georgia, serif;
  color: #27ae60;
}

8. :dir伪类用途

image.png

<div dir="ltr">从左到右的文本(Left to Right)</div>
<div dir="rtl">.טקסט מימין לשמאל (从右到左的文本)</div>

:dir(ltr) {
  background-color: #e8f4fc;
  padding: 10px;
}

:dir(rtl) {
  background-color: #fef9e7;
  padding: 10px;
  font-family: Arial, sans-serif;
  direction: rtl;
}

9. :has伪类使用

image.png

<div class="card">
  <img src="placeholder.jpg" alt="图片">
</div>

<div class="card">
  <p>纯文本卡片</p>
</div>

<div class="card">
  <h3>带标题的卡片</h3>
  <p>内容描述</p>
</div>

.card {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px;
  width: 200px;
  display: inline-block;
}

/* 含有img元素的卡片样式 */
.card:has(img) {
  border-color: #3498db;
  background-color: #e8f4fc;
}

/* 含有h3元素的卡片样式 */
.card:has(h3) {
  border-color: #e74c3c;
  background-color: #fdebd0;
}

/* 只含p元素的卡片样式 */
.card:has(:not(h3, img)) {
  border-color: #2ecc71;
  background-color: #eafaf1;
}

10. :is伪类简化代码

image.png

<article>
  <h1>文章标题</h1>
  <p>段落内容...</p>
</article>

<section>
  <h2>小节标题</h2>
  <p>更多内容...</p>
</section>

/* 传统写法 */
article h1, 
article h2, 
article h3,
section h1,
section h2,
section h3 {
  color: #e74c3c;
}

/* 使用:is简化 */
:is(article, section) :is(h1, h2, h3) {
  color: #3498db;
}

11. 动态高度动画解决方案

image.png

<button id="toggle">展开/收起</button>
<div class="collapsible">
  <div class="content">
    <p>这里是可展开内容...</p>
    <p>更多详细信息...</p>
  </div>
</div>

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  background: #e8f4fc;
  margin-top: 10px;
  width: 300px;
}

.collapsible.expanded {
  max-height: 200px; /* 设置为足够大的值 */
}

const toggle = document.getElementById('toggle');
const collapsible = document.querySelector('.collapsible');

toggle.addEventListener('click', () => {
  collapsible.classList.toggle('expanded');
});

12. background: conic-gradient应用

image.png

<div class="color-wheel"></div>
<div class="pie-chart"></div>

.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  margin: 20px auto;
}

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db 0% 30%,
    #2ecc71 30% 70%,
    #e74c3c 70% 100%
  );
  margin: 20px auto;
}

13. 多重径向渐变实现

image.png

<div class="multi-radial"></div>

.multi-radial {
  width: 300px;
  height: 200px;
  margin: 30px auto;
  background: 
    radial-gradient(circle at 20% 30%, #3498db, transparent 30%),
    radial-gradient(circle at 70% 60%, #e74c3c, transparent 40%),
    radial-gradient(circle at 40% 80%, #2ecc71, transparent 50%),
    linear-gradient(135deg, #f39c12, #9b59b6);
  border-radius: 10px;
}

14. repeating-radial-gradient应用

image.png

<div class="repeating-radial"></div>

.repeating-radial {
  width: 300px;
  height: 200px;
  margin: 30px auto;
  background: repeating-radial-gradient(
    circle,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
  border-radius: 10px;
}

15. 禁止字体缩放

<p class="fixed-size">此文本将不会随页面缩放而改变大小（移动端）</p>

.fixed-size {
  font-size: 16px;
  -webkit-text-size-adjust: none; /* 旧版Webkit */
  text-size-adjust: none; /* 标准属性 */
}

16-29. 表单伪类选择器

image.png

image.png

image.png

<form>
  <label for="quantity">数量 (0-100):</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" required>
  
  <label for="message">消息 (只读):</label>
  <textarea id="message" name="message" readonly>固定内容</textarea>
  
  <label for="email">邮箱 (必填):</label>
  <input type="email" id="email" name="email" required>
  
  <label for="info">附加信息 (选填):</label>
  <input type="text" id="info" name="info">
  
  <label for="comment">评论:</label>
  <textarea id="comment" name="comment"></textarea>
</form>

<div class="timeline">
  <div class="event past">过去的事件</div>
  <div class="event current">当前事件</div>
  <div class="event future">未来事件</div>
</div>

<article>
  <p class="first-line">这个段落的第一行将会有特殊样式。余下的文本将保持常规样式，以便展示:first-line伪元素如何只影响第一行内容，无论窗口大小如何变化。</p>
</article>

<div class="child-example">
  <p>唯一子元素</p>
</div>

<div class="type-example">
  <p>段落1</p>
  <span>唯一span元素</span>
</div>

<div class="last-type">
  <p>第一个段落</p>
  <p>第二个段落（最后）</p>
  <div>div元素</div>
</div>

/* 16. :out-of-range */
input:out-of-range {
  border: 2px solid #e74c3c;
  background-color: #fdeaeb;
}

/* 17. :in-range */
input:in-range {
  border: 2px solid #2ecc71;
}

/* 18. :required */
input:required {
  border-left: 4px solid #e74c3c;
}

/* 19. :optional */
input:optional {
  border-left: 4px solid #3498db;
}

/* 20. :read-only */
textarea:read-only {
  background-color: #f0f0f0;
  color: #777;
}

/* 21. :read-write */
textarea:read-write {
  background-color: #e8f4fc;
}

/* 22. :blank */
textarea:blank {
  border: 2px dashed #f39c12;
}

/* 23. :current */
.event.current {
  font-weight: bold;
  background-color: #fffacd;
}

/* 24. :past */
.event.past {
  color: #aaa;
}

/* 25. :future */
.event.future {
  color: #777;
}

/* 26. :first-line */
.first-line::first-line {
  font-weight: bold;
  color: #e74c3c;
  text-transform: uppercase;
}

/* 27. :only-child */
.child-example p:only-child {
  background-color: #e8f4fc;
  border: 1px solid #3498db;
  padding: 10px;
}

/* 28. :only-of-type */
.type-example span:only-of-type {
  background-color: #fdebd0;
  border: 1px solid #f39c12;
  padding: 10px;
  display: block;
}

/* 29. :last-of-type */
.last-type p:last-of-type {
  background-color: #e8f6f3;
  border: 1px solid #16a085;
  padding: 10px;
}

30. transparent属性值使用

image.png

<div class="transparent-example">
  <div class="overlay">透明叠加层</div>
</div>

.transparent-example {
  position: relative;
  width: 300px;
  height: 150px;
  background: linear-gradient(45deg, #3498db, #9b59b6);
  margin: 20px auto;
}

.overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #e74c3c;
}

31. 利用transparent设置透明度

image.png

<div class="transparency-layer">
  <div class="background-element"></div>
  <div class="overlay-element"></div>
</div>

.transparency-layer {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 30px auto;
}

.background-element {
  width: 100%;
  height: 100%;
  background: conic-gradient(#3498db, #2ecc71, #f1c40f, #e74c3c);
}

.overlay-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.7),
    transparent
  );
  
  border: 10px solid rgba(231, 76, 60, 0.4);
}

32. CSS镂空效果

image.png

<div class="hollow-out">
  <div class="shape">镂空效果</div>
</div>

.hollow-out {
  position: relative;
  width: 300px;
  height: 200px;
  background: url('background.jpg') center/cover;
  margin: 30px auto;
}

.shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: rgba(0, 0, 0, 0.5);
  
  /* 镂空效果 */
  -webkit-mask: radial-gradient(circle at center, transparent 40px, black 41px);
  mask: radial-gradient(circle at center, transparent 40px, black 41px);
  
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

33. clip属性使用

<div class="clipped-element"></div>

.clipped-element {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  
  /* clip属性（旧方法，推荐改用clip-path） */
  clip: rect(20px, 180px, 180px, 20px);
  
  /* 现代实现方式 */
  /* clip-path: polygon(20px 20px, 180px 20px, 180px 180px, 20px 180px); */
}

34. CSS骨骼动画

image.png

<div class="skeleton-loading">
  <div class="skeleton-title"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text short"></div>
</div>

.skeleton-loading {
  width: 300px;
  padding: 20px;
}

.skeleton-title, .skeleton-text {
  background-color: #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.skeleton-title {
  height: 24px;
  width: 70%;
  margin-bottom: 15px;
}

.skeleton-text {
  height: 16px;
}

.short {
  width: 60%;
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

.skeleton-title::after, .skeleton-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

35. max-height和height优先级

image.png

<div class="box max-height">max-height: 100px</div>
<div class="box height">height: 150px</div>
<div class="box both">max-height: 100px & height: 150px</div>

.box {
  width: 200px;
  background: #3498db;
  color: white;
  padding: 10px;
  margin: 10px auto;
  overflow: hidden;
}

.max-height {
  max-height: 100px;
  height: auto;
}

.height {
  height: 150px;
  max-height: none;
}

.both {
  height: 150px;
  max-height: 100px;
  background: #e74c3c;
}

完整页面实现

下面是整合所有示例的完整HTML页面代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS高级技巧与伪类实例</title>
  <style>
    /* 基础样式 */
    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      line-height: 1.6;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f8f9fa;
      color: #333;
    }

    h1, h2, h3 {
      color: #2c3e50;
      margin-top: 1.5em;
    }

    .demo-container {
      background: white;
      border-radius: 10px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      border: 1px solid #eee;
    }
    
    .section-title {
      border-bottom: 2px solid #3498db;
      padding-bottom: 10px;
      color: #2c3e50;
    }
    
    /* 1. 多边框效果 */
    .multi-borders {
      position: relative;
      width: 200px;
      height: 100px;
      background: #f0f8ff;
      border: 2px solid #3498db;
      border-radius: 8px;
      margin: 20px auto;
      padding: 15px;
      text-align: center;
      box-shadow: 
        0 0 0 5px #f1c40f,
        0 0 0 10px #e74c3c;
      outline: 3px dashed #9b59b6;
    }
    
    /* 2. 空链接显示URL */
    a[href]:not(:has(:not(br):not(wbr):not(span):visible))::after {
      content: "(" attr(href) ")";
      color: #e74c3c;
      font-weight: bold;
    }

    a[href="#"]::after {
      display: none;
    }
    
    /* 3. text-rendering属性 */
    .optimize-legibility {
      text-rendering: optimizeLegibility;
      font-size: 30px;
      margin: 15px;
    }

    .geometric-precision {
      text-rendering: geometricPrecision;
      font-size: 30px;
      margin: 15px;
    }
    
    /* 4. drop-shadow和box-shadow区别 */
    .box-shadow, .drop-shadow {
      width: 120px;
      height: 120px;
      margin: 20px;
      display: inline-block;
      background-color: #3498db;
      position: relative;
    }

    .box-shadow::after, .drop-shadow::after {
      content: "";
      position: absolute;
      top: 150px;
      width: 100px;
      height: 20px;
      background: #2ecc71;
    }

    .box-shadow {
      box-shadow: 5px 5px 5px #e74c3c;
    }

    .drop-shadow {
      filter: drop-shadow(5px 5px 5px #e74c3c);
    }
    
    /* 5. background-clip属性 */
    .clip-text, .clip-border {
      margin: 20px;
      padding: 20px;
      border: 10px dotted #3498db;
    }

    .clip-text {
      background: linear-gradient(45deg, #1abc9c, #3498db);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-size: 32px;
      font-weight: bold;
    }

    .clip-border {
      background: #2ecc71;
      background-clip: padding-box;
      height: 100px;
      width: 300px;
    }
    
    /* 6. line-height-step属性 */
    .stepped {
      line-height-step: 20px;
      font-size: 16px;
      border: 1px solid #ddd;
      padding: 10px;
      width: 300px;
      margin: 20px auto;
    }
    
    /* 7. :lang伪类 */
    :lang(en) {
      font-family: Arial, sans-serif;
      color: #2980b9;
    }

    :lang(fr) {
      font-family: 'Times New Roman', serif;
      color: #e74c3c;
      font-style: italic;
    }

    :lang(es) {
      font-family: Georgia, serif;
      color: #27ae60;
    }
    
    /* 8. :dir伪类 */
    :dir(ltr) {
      background-color: #e8f4fc;
      padding: 10px;
    }

    :dir(rtl) {
      background-color: #fef9e7;
      padding: 10px;
      font-family: Arial, sans-serif;
      direction: rtl;
    }
    
    /* 9. :has伪类 */
    .card {
      border: 1px solid #ddd;
      padding: 15px;
      margin: 10px;
      width: 200px;
      display: inline-block;
    }

    .card:has(img) {
      border-color: #3498db;
      background-color: #e8f4fc;
    }

    .card:has(h3) {
      border-color: #e74c3c;
      background-color: #fdebd0;
    }

    .card:has(:not(h3, img)) {
      border-color: #2ecc71;
      background-color: #eafaf1;
    }
    
    /* 10. :is伪类 */
    :is(article, section) :is(h1, h2, h3) {
      color: #3498db;
    }
    
    /* 11. 动态高度动画 */
    .collapsible {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease-out;
      background: #e8f4fc;
      margin-top: 10px;
      width: 300px;
    }

    .collapsible.expanded {
      max-height: 200px;
    }
    
    /* 12. conic-gradient */
    .color-wheel {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: conic-gradient(
        red, yellow, lime, aqua, blue, magenta, red
      );
      margin: 20px auto;
    }

    .pie-chart {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: conic-gradient(
        #3498db 0% 30%,
        #2ecc71 30% 70%,
        #e74c3c 70% 100%
      );
      margin: 20px auto;
    }
    
    /* 13. 多重径向渐变 */
    .multi-radial {
      width: 300px;
      height: 200px;
      margin: 30px auto;
      background: 
        radial-gradient(circle at 20% 30%, #3498db, transparent 30%),
        radial-gradient(circle at 70% 60%, #e74c3c, transparent 40%),
        radial-gradient(circle at 40% 80%, #2ecc71, transparent 50%),
        linear-gradient(135deg, #f39c12, #9b59b6);
      border-radius: 10px;
    }
    
    /* 14. repeating-radial-gradient */
    .repeating-radial {
      width: 300px;
      height: 200px;
      margin: 30px auto;
      background: repeating-radial-gradient(
        circle,
        #3498db,
        #3498db 10px,
        #2980b9 10px,
        #2980b9 20px
      );
      border-radius: 10px;
    }
    
    /* 15. 禁止字体缩放 */
    .fixed-size {
      font-size: 16px;
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
    }
    
    /* 表单伪类样式 */
    form {
      width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #f9f9f9;
    }

    label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
    }

    input, textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    /* 16. :out-of-range */
    input:out-of-range {
      border: 2px solid #e74c3c;
      background-color: #fdeaeb;
    }

    /* 17. :in-range */
    input:in-range {
      border: 2px solid #2ecc71;
    }

    /* 18. :required */
    input:required {
      border-left: 4px solid #e74c3c;
    }

    /* 19. :optional */
    input:optional {
      border-left: 4px solid #3498db;
    }

    /* 20. :read-only */
    textarea:read-only {
      background-color: #f0f0f0;
      color: #777;
    }

    /* 21. :read-write */
    textarea:read-write {
      background-color: #e8f4fc;
    }

    /* 22. :blank */
    textarea:blank {
      border: 2px dashed #f39c12;
    }
    
    /* 23. :current */
    .event.current {
      font-weight: bold;
      background-color: #fffacd;
    }

    /* 24. :past */
    .event.past {
      color: #aaa;
    }

    /* 25. :future */
    .event.future {
      color: #777;
    }
    
    /* 26. :first-line */
    .first-line::first-line {
      font-weight: bold;
      color: #e74c3c;
      text-transform: uppercase;
    }
    
    /* 27. :only-child */
    .child-example p:only-child {
      background-color: #e8f4fc;
      border: 1px solid #3498db;
      padding: 10px;
    }

    /* 28. :only-of-type */
    .type-example span:only-of-type {
      background-color: #fdebd0;
      border: 1px solid #f39c12;
      padding: 10px;
      display: block;
    }

    /* 29. :last-of-type */
    .last-type p:last-of-type {
      background-color: #e8f6f3;
      border: 1px solid #16a085;
      padding: 10px;
    }
    
    /* 时序伪类容器 */
    .timeline {
      width: 400px;
      margin: 20px auto;
    }

    .event {
      padding: 10px;
      margin: 5px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    
    /* 30. transparent属性使用 */
    .transparent-example {
      position: relative;
      width: 300px;
      height: 150px;
      background: linear-gradient(45deg, #3498db, #9b59b6);
      margin: 20px auto;
    }

    .overlay {
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      background: rgba(255, 255, 255, 0.7);
      border: 2px solid transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .overlay:hover {
      background: rgba(255, 255, 255, 0.9);
      border-color: #e74c3c;
    }
    
    /* 31. 透明度设置 */
    .transparency-layer {
      position: relative;
      width: 300px;
      height: 200px;
      margin: 30px auto;
    }

    .background-element {
      width: 100%;
      height: 100%;
      background: conic-gradient(#3498db, #2ecc71, #f1c40f, #e74c3c);
    }

    .overlay-element {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to right,
        rgba(255,255,255,0.7),
        transparent
      );
      border: 10px solid rgba(231, 76, 60, 0.4);
    }
    
    /* 32. 镂空效果 */
    .hollow-out {
      position: relative;
      width: 300px;
      height: 200px;
      background: url('https://picsum.photos/400/200') center/cover;
      margin: 30px auto;
    }

    .shape {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 120px;
      height: 120px;
      background: rgba(0, 0, 0, 0.5);
      -webkit-mask: radial-gradient(circle at center, transparent 40px, black 41px);
      mask: radial-gradient(circle at center, transparent 40px, black 41px);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    /* 33. clip属性 */
    .clipped-element {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 200px;
      background: linear-gradient(45deg, #3498db, #2ecc71);
      clip: rect(20px, 180px, 180px, 20px);
    }
    
    /* 34. 骨骼动画 */
    .skeleton-loading {
      width: 300px;
      padding: 20px;
      margin: 20px auto;
    }

    .skeleton-title, .skeleton-text {
      background-color: #eee;
      border-radius: 4px;
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;
    }

    .skeleton-title {
      height: 24px;
      width: 70%;
      margin-bottom: 15px;
    }

    .skeleton-text {
      height: 16px;
    }

    .short {
      width: 60%;
    }

    @keyframes shimmer {
      100% { transform: translateX(100%); }
    }

    .skeleton-title::after, .skeleton-text::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
      transform: translateX(-100%);
      animation: shimmer 1.5s infinite;
    }
    
    /* 35. max-height和height优先级 */
    .box {
      width: 200px;
      background: #3498db;
      color: white;
      padding: 10px;
      margin: 10px auto;
      overflow: hidden;
    }

    .max-height {
      max-height: 100px;
      height: auto;
    }

    .height {
      height: 150px;
      max-height: none;
    }

    .both {
      height: 150px;
      max-height: 100px;
      background: #e74c3c;
    }
    
    /* 辅助样式 */
    .flex-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    
    .example {
      margin: 20px 0;
      padding: 15px;
      border-left: 4px solid #3498db;
      background-color: #f8f9fa;
    }
    
    code {
      background: #eff2f5;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>CSS高级技巧与实用伪类深度指南</h1>
  
  <div class="demo-container">
    <h2 class="section-title">1. 多边框效果</h2>
    <div class="multi-borders">三重边框效果</div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">2. 空链接URL显示</h2>
    <a href="https://example.com"></a>
    <a href="https://css-tricks.com">已有文本</a>
    <a href="#"></a>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">3. text-rendering属性</h2>
    <div class="optimize-legibility">optimizeLegibility</div>
    <div class="geometric-precision">geometricPrecision</div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">4. drop-shadow vs box-shadow</h2>
    <div class="box-shadow">box-shadow</div>
    <div class="drop-shadow">drop-shadow</div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">5. background-clip属性</h2>
    <div class="clip-text">背景裁剪</div>
    <div class="clip-border">边框剪裁</div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">6. line-height-step属性</h2>
    <p class="stepped">行高阶梯调整: 这是第一行<br>这是第二行<br>第三行内容稍长一些</p>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">7. :lang伪类</h2>
    <p lang="en">This is English text</p>
    <p lang="fr">Ceci est du texte français</p>
    <p lang="es">Este es texto en español</p>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">8. :dir伪类</h2>
    <div dir="ltr">从左到右的文本(Left to Right)</div>
    <div dir="rtl">.טקסט מימין לשמאל (从右到左的文本)</div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">9. :has伪类</h2>
    <div class="flex-container">
      <div class="card">
        <img src="https://via.placeholder.com/150" alt="图片">
      </div>
      <div class="card">
        <p>纯文本卡片</p>
      </div>
      <div class="card">
        <h3>带标题的卡片</h3>
        <p>内容描述</p>
      </div>
    </div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">10. :is伪类</h2>
    <article>
      <h1>文章标题</h1>
      <p>段落内容...</p>
    </article>
    <section>
      <h2>小节标题</h2>
      <p>更多内容...</p>
    </section>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title" id="dynamic-height">11. 动态高度动画</h2>
    <button id="toggle">展开/收起</button>
    <div class="collapsible">
      <div class="content">
        <p>这里是可展开内容...</p>
        <p>更多详细信息...</p>
      </div>
    </div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">12. conic-gradient使用</h2>
    <div class="color-wheel"></div>
    <div class="pie-chart"></div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">13. 多重径向渐变</h2>
    <div class="multi-radial"></div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">14. repeating-radial-gradient</h2>
    <div class="repeating-radial"></div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">15. 禁止字体缩放</h2>
    <p class="fixed-size">此文本将不会随页面缩放而改变大小（移动端）</p>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">16-25. 表单伪类选择器</h2>
    <form>
      <label for="quantity">数量 (0-100):</label>
      <input type="number" id="quantity" name="quantity" min="0" max="100" required value="150">
      
      <label for="message">消息 (只读):</label>
      <textarea id="message" name="message" readonly>固定内容</textarea>
      
      <label for="email">邮箱 (必填):</label>
      <input type="email" id="email" name="email" required>
      
      <label for="info">附加信息 (选填):</label>
      <input type="text" id="info" name="info">
      
      <label for="comment">评论:</label>
      <textarea id="comment" name="comment"></textarea>
    </form>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">26. :first-line选择器</h2>
    <article>
      <p class="first-line">这个段落的第一行将会有特殊样式。余下的文本将保持常规样式，以便展示:first-line伪元素如何只影响第一行内容，无论窗口大小如何变化。</p>
    </article>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">27-29. 其他伪类选择器</h2>
    <div class="child-example">
      <p>唯一子元素</p>
    </div>
    
    <div class="type-example">
      <p>段落1</p>
      <span>唯一span元素</span>
    </div>
    
    <div class="last-type">
      <p>第一个段落</p>
      <p>第二个段落（最后）</p>
      <div>div元素</div>
    </div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">30. transparent属性使用</h2>
    <div class="transparent-example">
      <div class="overlay">透明叠加层</div>
    </div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">31. 透明度设置</h2>
    <div class="transparency-layer">
      <div class="background-element"></div>
      <div class="overlay-element"></div>
    </div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">32. 镂空效果</h2>
    <div class="hollow-out">
      <div class="shape">镂空效果</div>
    </div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">33. clip属性</h2>
    <div class="clipped-element"></div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">34. CSS骨骼动画</h2>
    <div class="skeleton-loading">
      <div class="skeleton-title"></div>
      <div class="skeleton-text"></div>
      <div class="skeleton-text"></div>
      <div class="skeleton-text short"></div>
    </div>
  </div>
  
  <div class="demo-container">
    <h2 class="section-title">35. max-height和height优先级</h2>
    <div class="box max-height">本盒子设置了 max-height: 100px;<br>和height: auto;<br><br>内容超出时会限制高度</div>
    <div class="box height">本盒子设置了 height: 150px;<br>和max-height: none;</div>
    <div class="box both">本盒子设置了 height: 150px;<br>和max-height: 100px;<br>max-height优先级更高</div>
  </div>
  
  <script>
    // 动态高度动画的JavaScript
    const toggle = document.getElementById('toggle');
    const collapsible = document.querySelector('.collapsible');
    
    toggle.addEventListener('click', () => {
      collapsible.classList.toggle('expanded');
    });
  </script>
</body>
</html>
avatar
文章
阅读
粉丝