悬浮框是什么？大家不一定清楚，但是说网站上怎么都关不完的小广告，估计人人都被它恶心过，不管你怎么滚动网页，这些小广告始终会出现在你的屏幕上。今天我们就来聊聊这些小广告背后的原理——悬浮框。

什么是悬浮框？

悬浮框是Web前端开发中的一种常见的网页特效，它悬浮于网页内容之上，不受滚动条的影响，可以一直处于浏览器的可视区域内。

要实现一个搜索框始终固定在页面顶部，无论用户如何滚动页面，可以使用CSS的position: fixed;属性。fixed定位会使元素相对于浏览器窗口定位，而不是相对于父元素。这使得元素在页面滚动时保持固定位置。

.search {
    position: fixed; /* 相对于浏览器窗口定位 */
    top: 0; /* 顶部距离为0 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中修正 */
    z-index: 2; /* 确保搜索框显示在其他元素之上 */
    display: flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中 */
    background-color: white; /* 背景颜色 */
    padding: 10px; /* 内边距 */
    border-radius: 23px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    width: 80%; /* 设置宽度 */
    max-width: 600px; /* 最大宽度 */
}

一、css3新增属性概述

在此前我们讲解的css课程中，课程内容是以css2版本为基础的，本章开始我们讲解css3版本的新特性。

在css2的时代，由于css的功能局限性，我们制作的很多网页效果都是利用一些取巧的方法，例如实现一个圆角的页面，我们需要把圆角的部分用图片代替，而制作动画效果，都需要使用JavaScript来完成的，这不仅增加了代码编写的难度，还降低了web开发人员的工作效率。

在css3中我们可以使用大量新增的属性，例如圆角，阴影，动画，形变等等，这让web开发便得更加简单。

本文内容采用连载形式，每一次新的内容可能与之前的内容相关联，我通过标题中最后的数字用以区分文章的先后次序，以便于读者在阅读文章时了解整个项目的发展脉络。

右栏详情设计

右侧栏设计与左侧栏类似，只是使用了不同的宽度值，而颜色值则采用了默认的白色背景和黑色前景色，如下图所示

图10中第41行代码与操作按钮相关，我们稍后介绍。第42行代码设置了右侧栏的宽度为70%，而左侧栏的宽度30%，二者之和正好占据其父容器的整个宽度。高度值和overflow-y属性值与左侧栏设置相同，整个右侧栏显示效果如图2所示。

函数简介

inset()函数为一个矩形块添加边距和圆角样式。此函数可用于为<base-shape>类型的CSS属性赋值，如：clip-path、shape-outside。

函数语法

本文由ScriptEcho平台提供技术支持

项目地址：传送门

基于 Tailwind CSS 构建响应式卡片布局

应用场景

本段代码适用于需要创建响应式网格布局的场景，例如展示产品列表、用户资料或任何需要灵活排列内容的情况。通过使用 Tailwind CSS，可以轻松创建可在各种设备上自适应的卡片。

我们在后台编辑器添加内容的时候，需要上传多张图片，为了美化这些图片显示效果，想起了给图片增加阴影和圆角，由于图片是在后台编辑上传的，没办法直接定义样式，后面想到两种解决方案，分享一下。

一种解决方案就是通过写js或jquery代码，然后配合着正侧表达式，用正侧表达式查找你内容里的Img图片，再用jquery或js代码给img添加css代码即可，具体的代码如下：