好文分享

perspective属性的位置对3d效果的影响 通常情况下，perspective属性需要设置在应用了transform-style: preserve-3d属性的父元素上。然而，如果perspective属性设置在后代元素上会产生不同的效果。 为了演示区别，让我们扩展已有的示例： front b…

空的容器：css属性查询 您曾使用过一个css属性，它可以让元素成为一个没有实际空间、样式或交互性的空容器。请问您知道它的名称吗？ 答案： 您指的应该是 display: contents 属性。这个属性会让元素像不存在一样，取消颜色、边框和其他样式。它甚至会让flex子元素关系跨越此层元素。 立即…

超出容器宽度的块级元素背景色问题 在指定父容器宽高并设置溢出滚动的情况下，如果给块级子元素设置背景色，初始隐藏的部分可能会没有背景色。这是因为没有复现这个情况，提供更完整的示例可能会更快的解决问题。 切换为块级元素后出现超出容器宽度问题： 切换为块级元素后，其默认拥有 width:100% 属性，这…

透视应设置在 transform-style: preserve-3d 元素的父级元素上吗？ 对于采用 css3 中的 transform-style: preserve-3d 的元素，perspective 属性通常建议设置在其父级元素上。 为何如此？ perspective 属性定义了相机与元素…

让子元素absolute根据父元素滚动内容的高度设置高度 在布局中，有时需要设置子元素的高度等于父元素的内容区域高度。特别是当父元素内容可滚动时，子元素的高度也要随之改变。以下是如何实现这一目标： 解决方案： 使用 position: relative 定位父元素内容区域： … 将 absolu…

给容器添加不规则图形边框的CSS实现方法 为了给容器添加不规则图形边框，可以使用 mask 属性，将 UI 提供的 SVG 图形作为遮罩。有关详细信息，请参阅相关笔记。 此外，可以使用 filter: drop-shadow() 来实现黄色的边框线。 备选解决方案 如果仅使用 CSS，目前尚未找到理…

css 中 font: 14px/20px 的含义 在 css 中，font 属性用于定义字体的各种属性，包括字体大小、字体系列和行高。当 font 属性包含类似于 “14px/20px” 的值时，它表示两个独立的属性： font-size：定义字体的实际大小，由第一个值（例…

盖章，让图像透明 客户提供了两张图片，一张是盖章，想要将盖章的效果应用到另一张图片上，同时让盖章的背景透明。 实现这一效果的关键在于使用 css 混合模式。 .img { mix-blend-mode: multiply;} 通过设置 mix-blend-mode: multiply，盖章图像将与下…

子元素absolute高度随父元素滚动内容改变问题 在网页设计中，有时我们需要让absolute子元素的高度与父元素中可滚动内容的高度一致。根据提供的html和css代码，父元素包含多个黑色块作为可滚动内容，而absolute子元素被设置为固定高度。 解决方案 要解决此问题，我们需要创建一个新的相对…

如何让 div 内的两个重叠 div 水平或垂直居中？ 在一个 div 中，存在两个子元素，也是 div。小 div 放置于大 div 内，并且需要它们重合。同时，这两个 div 需要相对于其父 div 进行水平或垂直居中。且此设置不能影响父 div 的外观，也不能让子 div 超出父 div 的边…