2024年10月26日
把元素的一个角（通常是右上角或右下角）处理成类似折角的形状，再配上或多或少的拟物样式，已经成为一种非常流行的装饰手法。
这是原代码即原效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 400px;
height: 300px;
background: #58a;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>2024年10月26日
众所周知，一般情况下div所表现出来的形态是一个矩形，如果给它添加border-radius属性，可以让它成为一个圆角矩形或者是圆形，但是如果希望div表现出更多的形态来呢？
那么我们就来讲讲如何用CSS来写一个六边形。
大家首先来看一下，一个六边形，拆解开来的话，就是一个矩形加左右两个三角形。
三角形的话很好写，用边框border属性就可以实现。
当我们给一个div非常粗的边框，但是宽度和高度分别都设置为0的时候，我就会得到如下的图形。
2024年10月26日
在图形表达时，如果没有特殊说明，均以毫米为单位
光滑度确定:工具/选项/显示/圆弧和圆的平滑度 为20000。注：最大值
右键功能取消:工具/选项/用户系统配置/绘图区域中不显示快捷菜单
密码设:工具/选项/打开和保存/下面的安全选项
对象捕捉设置:工具/草图设置/对象捕捉——全部选择
UCS图标可见性:视图/显示/UCS图标/（开/关）
相对坐标：前面加上@
相对直角坐标格式：@x的变量，Y的变量
2024年10月26日
广东IT优就业
广州IT培训老师，今天分享一下如何用css实现波浪效果。
有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。
首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色(水的颜色);内层div颜色设置为白色，加上圆角，圆角建议30%-45%之间，然后加上无限循环的旋转动画，通过内层div的旋转来实现波浪效果。
2024年10月26日
悬浮框是什么？大家不一定清楚，但是说网站上怎么都关不完的小广告，估计人人都被它恶心过，不管你怎么滚动网页，这些小广告始终会出现在你的屏幕上。今天我们就来聊聊这些小广告背后的原理——悬浮框。
悬浮框是Web前端开发中的一种常见的网页特效，它悬浮于网页内容之上，不受滚动条的影响，可以一直处于浏览器的可视区域内。
2024年10月26日
要实现一个搜索框始终固定在页面顶部，无论用户如何滚动页面，可以使用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; /* 最大宽度 */
}2024年10月26日
在此前我们讲解的css课程中，课程内容是以css2版本为基础的，本章开始我们讲解css3版本的新特性。
在css2的时代，由于css的功能局限性，我们制作的很多网页效果都是利用一些取巧的方法，例如实现一个圆角的页面，我们需要把圆角的部分用图片代替，而制作动画效果，都需要使用JavaScript来完成的，这不仅增加了代码编写的难度，还降低了web开发人员的工作效率。
在css3中我们可以使用大量新增的属性，例如圆角，阴影，动画，形变等等，这让web开发便得更加简单。
2024年10月26日
本文内容采用连载形式，每一次新的内容可能与之前的内容相关联，我通过标题中最后的数字用以区分文章的先后次序，以便于读者在阅读文章时了解整个项目的发展脉络。
右侧栏设计与左侧栏类似，只是使用了不同的宽度值，而颜色值则采用了默认的白色背景和黑色前景色，如下图所示
图10中第41行代码与操作按钮相关，我们稍后介绍。第42行代码设置了右侧栏的宽度为70%，而左侧栏的宽度30%，二者之和正好占据其父容器的整个宽度。高度值和overflow-y属性值与左侧栏设置相同，整个右侧栏显示效果如图2所示。
2024年10月26日
inset()函数为一个矩形块添加边距和圆角样式。此函数可用于为<base-shape>类型的CSS属性赋值，如：clip-path、shape-outside。
2024年10月26日
本文由ScriptEcho平台提供技术支持
项目地址：传送门
本段代码适用于需要创建响应式网格布局的场景，例如展示产品列表、用户资料或任何需要灵活排列内容的情况。通过使用 Tailwind CSS，可以轻松创建可在各种设备上自适应的卡片。