css编程的几个小技巧，希望对大家有用。

以下是三个实用的 CSS 编程小技巧及其实现方法：

一、使用 :focus-within 实现父元素聚焦效果

通过 CSS 伪类 :

focus-within，当子元素（如表单输入框）获得焦点时，父元素的样式可自动变化。常用于提升表单交互的视觉反馈。
‌
示例代码‌：

.form-block:focus-within {
  background: #f0f0f0;
  border: 2px solid blue;
}

此代码会为包含聚焦输入框的父容器 .form-block 添加背景色和边框样式。

二、利用 object-fit 自适应图像填充容器

object-fit 属性可控制图片在容器内的填充方式，避免拉伸变形。常用值包括 cover（裁剪填充）、contain（完整显示）。
‌
示例代码‌：

.image-container {
  width: 300px;
  height: 200px;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

此代码确保图片始终覆盖容器，并保持原始比例。

三、用 CSS 边框生成三角形

通过设置元素的边框属性，可快速生成三角形或其他几何形状。
‌
示例代码‌：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

此代码生成一个红色等腰三角形。

以上技巧结合了交互优化、布局适配和图形绘制场景，能有效提升开发效率和页面表现力。