2024年10月26日
在CSS大家肯定知道如何设一个圆角矩形，或者把一个div设成圆型，很简单，直接设置就行了，比如border-radius:5px; border-radius:50%; 或者你可以只设置一个角的弧度：
border-top-right-radius: 20px;
但其实，这个css 属性可以接受两个参数，一个是水平弧度，一个是垂直弧度，会产生奇怪的效果。看下图右上角设置不同值的变化。
2024年10月26日
我们先看一下组件效果图：
使用代码如下：
<template>
<div class="badge">
<ul>
<li>
<wt-align>
<wt-badge title="" ></wt-badge>
</wt-align>
</li>
<li>
<wt-align>
<wt-badge title="" type="primary"></wt-badge>
</wt-align>
</li>
<li>
<wt-align>
<wt-badge title="1" ></wt-badge>
</wt-align>
</li>
<li>
<wt-align>
<wt-badge title="1" type="primary"></wt-badge>
</wt-align>
</li>
<li>
<wt-align>
<wt-badge title="99" ></wt-badge>
</wt-align>
</li>
<li>
<wt-align>
<wt-badge title="99+" type="primary"></wt-badge>
</wt-align>
</li>
<li>
<wt-align>
<wt-badge title="拒绝" ></wt-badge>
</wt-align>
</li>
<li>
<wt-align>
<wt-badge title="生效中" type="primary"></wt-badge>
</wt-align>
</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue'
import Badge from '@/components/Badge.vue'
export default {
components: {
"wt-badge": Badge
},
setup () {
const dashed = ref(true)
return {
dashed
}
}
}
</script>
<style lang="less" scoped>
ul {
li {
display: block;
margin: 10px;
}
}
</style>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开发便得更加简单。