![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 71
css
V。on
这个作者很懒,什么都没留下…
展开
-
CSS动画详解
CSS动画(Cascading Style Sheets Animations)是一种利用CSS语言实现的网页元素动态效果技术。它允许开发者在不依赖JavaScript的情况下,通过简单的声明式语法创建丰富的视觉过渡效果。原创 2024-05-23 11:01:59 · 913 阅读 · 0 评论 -
text-stroke详解
属性是用来为文本添加描边效果的CSS属性,但请注意,它并非标准CSS属性,而是WebKit(如Safari和Chrome)浏览器专有的CSS扩展属性。为了兼容其他浏览器,通常会配合 -webkit-text-stroke 和 -moz-text-stroke 等私有前缀属性一起使用。原创 2024-04-17 17:24:50 · 713 阅读 · 0 评论 -
text-shadow详解
是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。原创 2024-04-17 16:53:51 · 1988 阅读 · 0 评论 -
background详解
background是 CSS 中的一个复合属性,用于设置元素的背景样式,包括颜色、图像、位置、大小、重复方式等。它可以简化为单独的背景属性,也可以一次性设置多个背景属性值。以下是background。原创 2024-04-12 10:32:25 · 1294 阅读 · 0 评论 -
box-shadow详解
box-shadow属性可以设置一个或多个下拉阴影的框。原创 2023-02-20 10:39:24 · 38519 阅读 · 5 评论 -
CSS之几个小技巧
使用CSS线性渐变实现大量重复有规律的线条,或者方块图形。可以对图形进行裁剪,被裁剪区域是透明遮罩层。原创 2023-02-17 14:47:09 · 157 阅读 · 0 评论 -
CSS自定义鼠标样式
属性值属性描述url需使用的自定义光标的 URLdefault默认光标(通常是一个箭头)auto默认。浏览器设置的光标crosshair光标呈现为十字线pointer光标呈现为指示链接的指针(一只手)move此光标指示某对象可被移动e-resize此光标指示矩形框的边缘可被向右(东)移动ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)n-resize。原创 2023-02-16 16:12:33 · 1575 阅读 · 0 评论 -
CSS3 animation-fill-mode详解
属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。属性可重写该行为。原创 2023-02-15 16:49:29 · 3080 阅读 · 0 评论 -
CSS单位之vw、vh、vmin、vmax、%
视窗(Viewport)是指浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时,将相对于其相对的元素宽度(递归父元素直到第一个设置了position的元素)。注意:position:fixed时,无论当前元素放在哪里,将相对于窗口宽度。1vh 等于1/100的视窗高度,1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。原创 2023-02-14 11:01:52 · 3522 阅读 · 0 评论 -
box-reflect
* 向下反射 *//* 向上反射 *//* 向左反射 *//* 向右反射 */原创 2023-02-10 17:54:15 · 68 阅读 · 0 评论 -
filter及backdrop-filter属性详解
属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。作用于元素本身属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。作用于元素背后的区域所覆盖的所有元素。它最常用的功能就是毛玻璃效果。下面运用一个例子来对比效果:效果如下图:效果如下图:那么我们再写一个例子来谈谈以及的不同:效果如下:所以, 作用于当前元素,并且它的后代元素也会继承这个属性; 作用于元素背后的所有元素。最后,有两个他们的相同原创 2023-02-10 16:51:36 · 2289 阅读 · 0 评论 -
SASS详解
程序监测,目录下的所有scss/sass源文件都会被编译,但通常不希望局部文件被编译,因为局部文件是用来被导入到其他文件的。一般适用于通过@import导入的sass库文件,可以定制修改sass库文件中的某些值。一般我们都将变量当做属性值来使用, 但是也有极特殊情况下我们会将变量当做。文件时就把相关文件导入进来。源文件,被导入的文件就是局部文件,局部文件让。用法基本一致,只不过写法不同。文件中,而无需发起额外的下载请求。那就代表这个是当前变量的默认值。的混合器实现大段样式的重用。开头来命名这些文件。原创 2022-10-09 15:45:37 · 304 阅读 · 0 评论 -
CSS实现文字跑马灯效果
* 最外层盒子,需要三个属性:定宽、文字不换行、超过隐藏 *//* 让前面的几个文字有一个初始的距离,达到更好的呈现效果 */在完成一个任务的时候,要求在表格中固定宽度的其中一个。/* 盒子背景宽度将随文字宽度而进行自适应 *//* 添加动画 */原创 2022-08-09 10:30:45 · 5692 阅读 · 0 评论 -
修改css默认滚动条样式
以下代码的共同如下:滚动条整体部分内层滚动轨道会覆盖 的样式。滚动滑块以下为竖状滚动条简单示例:以下为横向滚动条简单示例:原创 2022-08-08 16:29:33 · 450 阅读 · 0 评论 -
vue使用CSS 变量
在我们知道什么是CSS变量之后,我们尝试把它在项目中运用起来,一些需要动态计算的值,我们就可以使用它快速的实现效果。以下为示例二,有的时候,一些属性我们可能需要根据一些条件计算得来,那么也能很好的去使用它。首先,我们要先知道什么是CSS变量,可以先看这篇。就能根据传入的值达到对应的效果呢?中书写的,那么如何不使用。......原创 2022-08-04 16:56:08 · 5934 阅读 · 2 评论 -
CSS三维倾斜
*一定要给父元素设置井深*/原创 2022-07-20 16:01:26 · 383 阅读 · 0 评论 -
CSS翻牌器
代码】CSS翻牌器。原创 2022-07-20 15:24:20 · 428 阅读 · 0 评论 -
CSS实现圆环进度条
该例子是写的固定的进度,你们也可以根据自己的需求变换。首先,我们先看一个静态进度条。其实和静态的是一样的。原创 2022-07-18 17:54:50 · 13023 阅读 · 6 评论 -
CSS文字倒影渐变
【代码】CSS文字倒影渐变。原创 2022-07-14 15:47:30 · 1143 阅读 · 0 评论 -
如何使一个不定宽和不定高的元素垂直水平居中
垂直水平居中原创 2022-06-30 10:28:24 · 62 阅读 · 0 评论 -
CSS Grid详解
代表每列的列宽将至少为 100px,而如果有更多的可用空间,栅格布局会将其均分给每列,因为这些列变成了 fraction 单位,而不是 px。如果按照以上,我们定义为3x3的网格,会发现和上一例子的效果是一样的。需要注意的是,我们给这个网格定义为2x3的网格,那么当它超出后,表现形式就不会受我们设置而改变。属性,但是,这还没有做任何事情,因为我们还没有定义我们希望我们的网格看起来如何。我们再看一个列子试图明白其中的奥秘,它的父元素属性设置与上例中是一样的。的前两行,所以第三行的行高是它本来的行高。原创 2022-06-29 11:54:48 · 2658 阅读 · 2 评论 -
使用弹性盒实现多种常见布局
使用弹性盒实现多种常见布局原创 2022-06-28 17:41:36 · 285 阅读 · 0 评论 -
关于文字的一些小技巧
关于文字的一些小技巧单行省略号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-05-24 11:17:35 · 109 阅读 · 0 评论 -
环状菜单组件
环状菜单组件今天咱们来实现一个环状菜单组件,大概效果如下图:最近呢,正好学习了clip-path这个属性,那么我就想尝试使用它来完成这个效果。那么首先,我们需要实现一个扇形的css。div { width: 480px; height: 480px; border-radius: 50%; background-color: rgba(24, 24, 24, .75); clip-path: polygon(50% 50%, 100% -2px, 100%原创 2022-05-11 14:13:45 · 1562 阅读 · 2 评论 -
clip-path应用
clip-path应用对话框clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);五角星clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);旋转边框<!DOCTYPE html><html原创 2022-04-25 14:30:49 · 246 阅读 · 0 评论 -
clip-path
clip-pathclip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状。语法: clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;属性描述clip-source用 URL 表示剪切元素的路径basic-shape将元原创 2022-04-24 17:02:32 · 1722 阅读 · 0 评论 -
CSS实现渐变圆环
CSS实现渐变圆环今天呢,我们来讲讲使用CSS实现渐变圆环。linear-gradient实现首先呢,我们的初步思维应该是画一个圆,通过背景色渐变来实现一个基本的圆形渐变,再定位一个纯色背景色的圆形覆盖在上一个圆形,来创建一个从视角上看起来是渐变的圆环。代码如下:<div class="circle"> <div class="content"></div></div>.circle { width: 206px;原创 2022-03-25 15:30:01 · 9358 阅读 · 0 评论 -
使用css画刻度图表
使用css画刻度图表很多时候呢,一些比较简单的图表都会选择自己写,也不想引入echart或者其他第三方组件。那么今天呢,就来讲讲其中一个案例,如何使用css来实现以下图表:基本代码(使用vue)如下:<template> <div class="container"> <div class="container_chart"> <div class="container_char原创 2021-12-15 16:33:40 · 1370 阅读 · 0 评论 -
css选择器及权重
css选择器及权重一、元素选择符(elment选择器)语法: 元素名称{ 属性: 属性值; }元素选择符就是文档语言对象类型作为选择符,即使用结构中元素作为选择符。例如body、div、p等所有的页面元素都可以作为选择符div { width: 200px; height: 200px;}二、id选择器语法: #id名{ 属性: 属性值; }起id名时要取英文名,不能用关键字(所有的标记和属性都是关键字,如head标记)一个id名称只能对应文档中一个具体的元素对戏那个,因原创 2021-08-22 22:39:16 · 302 阅读 · 0 评论 -
css样式表
css样式表一、css语法组成:选择器(选择符)和声明组成。选择器(选择符)其实是一种方法,重在选择两个字,作用:选取标签给其设置样式。声明分为属性和属性值,声明是放在花括号里面的。属性和属性值是用冒号连接的,用分号结束的。div { width: 200px; height: 200px; background-color: red;}二、样式表什么是样式表?就是放置css代码一个环境。因为html和css是两种不同的语言,进行“沟通”,需要“桥梁”,样式表就是起了桥梁的作用。原创 2021-08-22 20:05:59 · 215 阅读 · 0 评论 -
重排、重绘及合成
重排、重绘及合成一、重排定义:部分渲染树(或者整个渲染树)需要重新分析并且节点尺⼨需要重新计算,表现为重新⽣成布局,重新排列元素。例如改变元素位置或大小等。触发条件添加、删除、更新DOM节点通过display: none隐藏⼀个DOM节点移动或者给⻚⾯中的DOM节点添加动画添加⼀个样式表,调整样式属性⽤户⾏为,例如调整窗⼝⼤⼩,改变字号,或者滚动。页面渲染初始化(无法避免)优化方案尽量不要在布局信息改变时做查询(会导致渲染队列强制刷新)。集中改变样式 。// 判断是否是⿊原创 2021-04-28 17:41:31 · 167 阅读 · 0 评论