CSS - 随笔分类 - 周文豪

CSS:transform-origin

摘要：transform-origin：设置旋转元素的基点位置 ,即旋转轴的位置。而transform主要是平移translate和旋转rotate的功能。使用transform-origin属性必须先使用transform属性（旋转） transform-origin: x-axis y-axis z 阅读全文

posted @ 2024-10-10 11:30 周文豪阅读(665) 评论(0) 推荐(0) 编辑

给弹框添加关闭按钮

摘要：效果如下：代码: 父组件 <template> <el-container class="container"> <h1>这是父组件</h1> <HelloWorld v-if="detailVisible" msg="Welcome to Your Vue.js App" @detailClos 阅读全文

posted @ 2024-04-30 14:14 周文豪阅读(29) 评论(0) 推荐(0) 编辑

Misans global字体在vue中如何使用

摘要：一、字体下载字体官网链接：https://hyperos.mi.com/font/zh/download/ MiSans Global 是由小米主导,联合蒙纳字库、汉仪字库共同打造的全球语言字体定制项目。下载之后如下所示：解压之后如下所示：二、使用步骤 1、将Misans global字体文阅读全文

posted @ 2024-04-14 10:17 周文豪阅读(355) 评论(0) 推荐(0) 编辑

html中table如何在td中画对角线

摘要：在HTML中，要在<td>单元格中绘制对角线，可以使用CSS样式。具体做法是在<td>元素中添加一个<div>元素，并使用CSS的::before伪元素来创建对角线。代码如下： <td style="width:3%" class="diagonal-line"> <div></div> </td 阅读全文

posted @ 2024-03-27 11:08 周文豪阅读(749) 评论(0) 推荐(0) 编辑

修改el-tabs的样式

摘要：element-ui代码 <template> <div style="width: 800px;"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="用户管理" name 阅读全文

posted @ 2024-03-14 10:10 周文豪阅读(1478) 评论(0) 推荐(0) 编辑

CSS实现滚动贴合效果

摘要：一、滚动贴合介绍滚动贴合：鼠标滚动的时候，自动贴合到浏览器的底部或顶部设置CSS滚动贴合需要使用到两个属性： 1、给滚动容器设置scroll-snap-type，值为滚动的方向和方式 .container { /* display: flex; */ /* 第一个值为滚动贴合的方向，y表示纵向滚阅读全文

posted @ 2023-12-28 11:14 周文豪阅读(201) 评论(0) 推荐(0) 编辑

background-size: cover与background-size: contain

摘要：background-size的可能值 background-size的可能值是auto, contain, 和cover. 1、background-size: cover 在这里，图像将被调整大小以适应容器。如果长宽比不一样，那么图像将被屏蔽以适应。当使用background-size: co 阅读全文

posted @ 2023-12-22 16:41 周文豪阅读(3270) 评论(0) 推荐(0) 编辑

SVG动画

摘要：一、下载SVG 网站：https://undraw.co/ 点击“browse now” 点击“search” 点击第一个点击“Download SVG for your projects” 对代码进行格式化将代码拷贝到vs code中，用快捷键“Shift+Alt+F”进行格式化，格式化之后如阅读全文

posted @ 2023-12-22 11:28 周文豪阅读(132) 评论(0) 推荐(0) 编辑

font-size 设置字体不生效解决方案

摘要：使用 font-size 设置小于 12px 的字体时，发现并不生效（字体不会再缩小了）。原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px，大部分浏览器都是如此,所以小于12px字体不会在变小，而是保持12px的大小添加如下代码： display: 阅读全文

posted @ 2023-12-21 11:15 周文豪阅读(498) 评论(0) 推荐(0) 编辑

style中通过import引入样式时,scoped不生效

摘要：通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式 <style lang="scss" scoped> @import url(../style.scss); </style> 此时虽然用了scoped，但是样式还是全局的。造成样式污染的案例：（1）、父页面阅读全文

posted @ 2023-12-15 17:57 周文豪阅读(469) 评论(0) 推荐(0) 编辑

CSS：backdrop-filter实现磨砂玻璃(毛玻璃glassmorphism)特效

摘要：一、什么是backdrop-filter backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素的背景至少部分透明。 backdrop-filter和background两个属性就可以把后边的背景图片阅读全文

posted @ 2023-11-10 16:54 周文豪阅读(2814) 评论(0) 推荐(0) 编辑

CSS：箭头

摘要：一、箭头产生的原理 1、设置一个div，然后给他设置样式：边框100px，上右下左颜色分别为绿、蓝、橘、红。然后设置div的高度和长度均为100px <template> <div class="about"> <div id="demo12"></div> </div> </template> < 阅读全文

posted @ 2023-11-10 15:08 周文豪阅读(183) 评论(0) 推荐(0) 编辑

CSS:@keyframes和animation

摘要：一、@keyframes定义动画通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 阅读全文

posted @ 2023-10-17 18:16 周文豪阅读(286) 评论(0) 推荐(0) 编辑

随笔分类 - CSS