css学习分享

炸虾条
82 阅读2分钟

一、element-plus官网滚动时头部背景变化

image.png

关键代码

background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);

分析

// 这种模式会重复，创建一个由透明像素和白色像素交替组成的背景图像。
background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;

效果图
image.png
分析

  • background-image：定义了一个径向渐变作为背景图像。

    • transparent 1px：从中心开始的第一个像素是透明的。
    • #fff 1px：紧接着透明像素之后的一个像素是白色的。

  • background-size：设置了背景图像的重复大小。在这个例子中，背景图像的大小为 4 x 4px，这意味着背景图像会在 4 x 4 px 的范围内重复。

backdrop-filter: saturate(50%) blur(4px);

效果图

image.png
分析

  • backdrop-filter：这是一个 CSS 属性，用于改变元素背后的内容的视觉效果，而不是改变元素本身的视觉效果。
  • saturate(50%) ：这个滤镜效果降低了元素背后的内容颜色的饱和度至 50%。
  • blur(4px) ：这个滤镜效果使背景变得模糊，模糊半径为 4px。

二、实现内层元素聚焦时外层样式改变

image.png

//实现el-input聚焦时box背景改变
<div class="box">
    <el-input v-model="form.name"></el-input>
</div>

.box{
  padding:20px;
  &:focus-within{
    background: #f1f1f1;
  }
}

分析：:focus-within 表示当元素或其任意后代元素被聚焦时，将匹配该元素。换言之，它表示 :focus 伪类匹配到该元素自身或它的后代时，该伪类生效。

三、文本第一个字符大写占两行，并修改选择文本的样式

image.png

<div class="box">
      pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
</div>

.box::first-letter{
  font-size: 32px;
  text-transform: uppercase;//转大写
  float: left;
  margin-right: 10px;
}
.box::selection{
  color:red;
  background: #999;
}
avatar
文章
阅读
粉丝