编程

要实现文字描边并显得“加粗”，需结合-webkit-text-stroke与font-weight、text-shadow等属性协同使用；1. 设置font-weight为bold或更高数值使文字骨架变粗；2. 使用-webkit-text-stroke-width和-webkit-text-str…

实现多行文本省略的核心答案是使用-webkit-line-clamp属性配合必要样式；1. 必须设置overflow: hidden、text-overflow: ellipsis、display: -webkit-box、-webkit-box-orient: vertical才能使-webkit…

实现图片局部放大镜效果的关键是结合css的transform、background-position与javascript的鼠标事件控制；1. 使用css设置容器相对定位和溢出隐藏，图片填充容器，放大镜元素绝对定位并设为圆形且初始隐藏；2. 通过javascript监听mousemove事件，计算鼠…

自定义单选按钮的核心思路是：1. 通过html将原生input与label关联，并在label内设置自定义视觉元素；2. 使用css将原生input隐藏但保留可访问性；3. 利用:checked伪类和相邻兄弟选择器控制自定义样式的选中状态；4. 借助伪元素实现内部圆点等细节；5. 确保可访问性、点击…

自定义滚动条主要通过::-webkit-scrollbar及其子伪元素实现，1. 使用::-webkit-scrollbar设置滚动条宽高；2. 用::-webkit-scrollbar-track定义轨道样式；3. 用::-webkit-scrollbar-thumb设置滑块样式；4. 可选地使用…

要让css背景图不随页面滚动，最直接有效的方法是使用background-attachment: fixed;，它使背景图相对于视口固定不动，而页面内容在其上方滚动，从而形成视觉上的层次感；配合background-image、background-repeat: no-repeat、backgro…

要实现文字围绕图片进行非矩形环绕，主要依靠 shape-outside 属性。1. 必须将图片设置为浮动元素（float: left 或 float: right），这是 shape-outside 生效的前提；2. 应用 shape-outside 属性，可选值包括 circle() 实现圆形环绕…

移动端1px边框看起来粗的原因是高dpr设备下css像素与物理像素不对应，导致1px css边框占用多个物理像素；2. 最优解决方案是使用伪元素结合transform: scale(0.5)，通过在y轴或x轴缩放实现真正的1物理像素边框；3. 该方案需父元素设置position定位，伪元素通过wid…

font-display属性通过控制字体加载行为平衡用户体验与性能；2. 其值为auto、block、swap、fallback、optional，分别对应不同加载策略；3. swap策略优先展示备用字体，提升fcp和lcp，适合内容型网站；4. fallback和optional减少字体切换与加载…

使用css实现图片黑白效果首选filter: grayscale()，其参数为百分比，0%为全彩，100%为全黑，如filter: grayscale(50%)可实现半灰效果；通过:hover伪类结合transition可实现鼠标悬停时平滑变黑白的效果；为兼容老旧浏览器，可使用filter:prog…