![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
oldfour_0830_9674
这个作者很懒,什么都没留下…
展开
-
png图片给背景添加阴影
使用 参数沿图像的轮廓生成阴影效果。阴影语法类似于 (在 CSS 背景和边框模块中定义),但不允许使用 inset 关键字以及 spread 参数。与所有 filter 属性值一样,任何在 drop-shadow() 后的滤镜同样会应用在阴影上。CSS filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。/* 阴影模糊半径 */原创 2023-10-07 15:21:34 · 315 阅读 · 0 评论 -
好看的头像排序样式
<div>1</div><div>2</div><div>3</div><div>4</div>body{ background:#000; display: flex; justify-content: center; align-items: center; height:100vh; flex-direction: row-reverse;}div{ width:.原创 2021-04-29 11:06:13 · 269 阅读 · 0 评论 -
4种文字特效动画(跳动,翻转,缩放,发光)
效果展示代码<!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"> <title>文原创 2021-03-15 01:16:08 · 966 阅读 · 0 评论 -
文字输入特效少量JS代码实现,var在css中使用,setProperty在js中的使用
代码<!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"> <title>输入文字特效&原创 2021-03-14 00:58:42 · 2875 阅读 · 0 评论 -
css实现文字输入特效
实现代码<!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"> <title>输入文字特原创 2021-03-14 00:48:16 · 588 阅读 · 0 评论 -
如何动态的绑定style在vue中
:style="{ top: item.top + 'px', left: item.left + 'px', transform: item.deg, }"要点:注意绑定的是一个对象,在我们使用到css一写特有写法时,要注意到这一个问题。列如:使用transform属性,动态绑定一个旋转角度,则我们需要写成这样的格式:{type: ‘red’,id: 0,left: 81,top: .原创 2020-12-23 15:53:32 · 971 阅读 · 0 评论 -
重新认识web前端-字体样式和文本样式
字体样式和文本样式字体样式字号字体系列字体加粗字体风格文本样式行高文本装饰字体样式字号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib原创 2020-08-17 00:45:27 · 213 阅读 · 0 评论 -
重新认识web前端-认识盒子模型
盒模型(box model)所有HTML元素,都可以看作是一个盒子.盒子的重要组成要素包括:内容(width,height),内边距(padding),边框(border),外边距(margin);标准盒模型:定义宽高,不包含padding,border重点区分:内容宽高, 占位宽高盒子总占位:横向: width+padding(左右)+border(左右)+margin(左右)纵向: height+padding(上下)+border(上下)+margin(上下)...原创 2020-08-18 00:11:21 · 129 阅读 · 0 评论 -
重新认识web前端-margin叠加问题
前提普通文档流内的块元素元素并列【垂直】方向上相遇的margin值会发生叠加 正值: 两值相等,取当前 两者不同,取较大 负值: 两值相等,取当前 两者不同,取绝对值较大 一正一负:相加(正常) //css div{w原创 2020-08-18 00:25:18 · 118 阅读 · 0 评论 -
重新认识web前端-元素特性总结
display: block 显示为块 inline 显示为内联 inline-block显示为内联块 块元素 block 独占一行 默认宽度100% 支持所有css属性(宽高,内外边距,行高) 内联元素: inline 可以在一行排列,一行盛不下自动换行 默认宽度适应内容...原创 2020-08-18 00:28:13 · 131 阅读 · 0 评论 -
重新认识web前端-浮动问题的总结
认识什么是浮动 浮动会使元素【脱离文档流】并按照【指定的方向】排列, 直到遇到父元素的边界或另一个浮动元素【停止】 文档流 文档中所有可见元素的排列占位 默认 块元素从上向下排列 内联元素从左向右排列 float: left左浮动 从左向右排列元素 right右浮动原创 2020-08-18 00:40:45 · 461 阅读 · 0 评论 -
css鼠标样式
css鼠标样式语法及20种可选值(属性)我们对Windows各种各样的鼠标样式都不陌生,当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形,在其它地方似乎没有什么变化,同充满动感的网页显得不怎么和谐。这里教大家用CSS来定义20种种鼠标样式形状。在CSS中,使用cursor属性来定义鼠标的样式。用css控制鼠标样式的语法如下:文本或其它页面元素把 * 换成如下20个可选值的一种:cursor属性取转载 2020-09-04 10:19:10 · 1023 阅读 · 0 评论 -
【小技巧】CSS文字两端对齐
需求需要文字两端对齐。解决方法:1.计算空格通过数空格方式实现。2.使用css样式 // 对单行文本有用 // text-align: justify; //强制文本对齐 text-align-last: justify;3.空标签实现参考链接要使文字两端对齐,我们还得使用一个行内空标签来助阵,比如、等等,这里是我用标签<div>我们还得使用一个行内空标签来助阵!<i></i></div>div原创 2020-09-04 10:29:06 · 325 阅读 · 0 评论 -
单个卡片翻动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; m原创 2020-10-24 10:11:12 · 92 阅读 · 0 评论