CSS
CSS
小歪 | 前端
这个作者很懒,什么都没留下…
展开
-
CSS_scss切换主题
CSS_scss切换主题原创 2024-04-25 23:35:36 · 245 阅读 · 0 评论 -
CSS_sass模块化、scss模块化
CSS_sass模块化、scss模块化原创 2024-04-25 14:04:07 · 373 阅读 · 0 评论 -
CSS_实现三角形和聊天气泡框
CSS_实现三角形和聊天气泡框原创 2024-02-28 09:56:29 · 1875 阅读 · 0 评论 -
CSS_文字渐变
【代码】CSS_文字渐变。原创 2023-09-09 11:33:31 · 392 阅读 · 0 评论 -
CSS_IOS适配状态栏和IOS底部安全区域
CSS_IOS适配状态栏和IOS底部安全区域原创 2023-08-30 15:23:30 · 1353 阅读 · 0 评论 -
CSS_calc() 函数内部怎么使用scss变量
CSS_calc() 函数内部怎么使用scss变量原创 2023-07-05 10:13:33 · 1223 阅读 · 0 评论 -
CSS_都有什么长度单位,每一种单位都有其特定的意义和用途
CSS_都有什么长度单位,每一种单位都有其特定的意义和用途原创 2023-06-30 14:52:22 · 672 阅读 · 0 评论 -
CSS_高度自动过渡 auto height
CSS_高度自动过渡 auto height原创 2023-06-28 14:11:11 · 1293 阅读 · 0 评论 -
CSS_直接展示带有换行符号的字符串
【代码】CSS_直接展示带有换行符号的字符串。原创 2023-02-03 13:08:29 · 513 阅读 · 0 评论 -
CSS_实现瀑布流布局
CSS_实现瀑布流布局原创 2023-01-07 10:14:57 · 1234 阅读 · 0 评论 -
JS_自定义上传文件按钮样式
js自定义上传文件按钮样式原创 2022-12-01 15:12:02 · 846 阅读 · 0 评论 -
CSS_设置伪元素层级在父级下边
CSS_设置伪元素层级在父级下边css伪元素,层级太高,挡住了父级子元素。原创 2022-12-01 13:41:32 · 992 阅读 · 0 评论 -
CSS_图片自适应
object-fit值描述 尝试一下fill默认,不保证保持原有的比例,内容拉伸填充整个内容容器。contain保持原有尺寸比例。内容被缩放。cover保持原有尺寸比例。但部分内容可能被剪切。none保留原有元素内容的长度和宽度,也就是说内容不会被重置。scale-down保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小initial设置为默认值inherit从该元素的原创 2022-07-08 11:02:20 · 591 阅读 · 0 评论 -
CSS_左右间歇晃动效果
CSS_左右间歇晃动效果原创 2022-07-04 10:52:45 · 1006 阅读 · 1 评论 -
CSS_css裁剪,定位显示图片中某个位置
CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。top right bottom left分别指最终剪裁可见区域的上边,右边,下边与左边。而所有的数值都表示位置,且是相对于原始元素的左上角而言的。于是...原创 2022-06-30 09:58:43 · 994 阅读 · 0 评论 -
CSS_如何修改radio/checkbox(单选框/复选项)样式大小
<label><checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中 </label>color:是选中时对勾的颜色;transform:scale(0.7)是选框的大小缩小的倍数原创 2021-12-22 14:16:15 · 2719 阅读 · 0 评论 -
CSS_CSS让整个网页成灰色
html{ filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-filter: grayscale(1);}原创 2021-12-13 11:52:51 · 755 阅读 · 0 评论 -
CSS_10个可视化 CSS 工具,快速生成 CSS代码
1. Neumorphismhttps://neumorphism.io/#e0e0e0这个网站为 section 或 div 生成对应UI,它也可以自定义border-radius, box-shadow 等。2. Smooth Shadowhttps://shadows.brumm.af/它可以为我们生成多个分层阴影,一种非常酷的效果,也可以从曲线中自定义颜色。3. Clippyhttps://bennettfeely.com/clippy/Clippy 是一个 CSS clip-a原创 2021-11-23 12:07:18 · 7924 阅读 · 0 评论 -
CSS_设置小于12px的字体,小字体设置
使用transform技巧<div class="text">text</div><style> .text{ font-size: 12px; transform: scale(0.8); }</style>原创 2021-11-10 10:23:43 · 750 阅读 · 0 评论 -
CSS_19种鼠标指针光标样式
示例<div style="cursor: move;">123</div>auto :标准光标default :标准箭头hand :手形光标wait :等待光标text :I 形光标vertical-text :水平 I 形光标no-drop :不可拖动光标not-allowed :无效光标help :?帮助光标all-scroll :三角方向标move :移动标crosshair :十字标e-resizen-resizenw-resizew-r原创 2021-09-18 11:12:43 · 4059 阅读 · 0 评论 -
CSS_遮罩层下面按钮无法点击解决
pointer-events当它的被设置为 none 的时候,能让元素实体虚化,虽然存在这个元素,但是该元素不会触发鼠标事件pointer-events: none;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <tit原创 2021-09-16 15:58:49 · 1355 阅读 · 0 评论 -
JS_HTML5+CSS3实现数字滚动特效
<!DOCTYPE html><html><head> <title>number falls</title></head><body><canvas id="canvas"></canvas><style type="text/css"> body { margin: 0; padding: 0; overfl.原创 2021-09-10 17:46:07 · 715 阅读 · 0 评论 -
CSS_怎么让div宽度自适应文字内容
<div class="box">测试文字</div>.box{ border: 1px solid red;}div宽度自适应文字内容直接用css3的fit-content.box{ border: 1px solid red; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;}原创 2021-05-27 18:00:47 · 2444 阅读 · 0 评论 -
CSS_a标签去除默认样式
/*包含以下四种的链接*/a { text-decoration: none; } /*正常的未被访问过的链接*/ a:link { text-decoration: none; } /*已经访问过的链接*/ a:visited { text-decoration: none; } /*鼠标划过(停留)的链接*/ a:hover { text-decoration: none; } /* 正在点击的链接*/ a:active { t原创 2021-05-19 16:12:13 · 657 阅读 · 0 评论 -
CSS_css计算属性calc提示hnvalid properpy value ,calc不起作用
height: calc(100vh - 120px);calc 进行简单的运算时,运算符号左右各要有一个空格,不然不起作用。原创 2021-04-27 09:35:12 · 189 阅读 · 0 评论 -
CSS_使用属性position:fixed的时候怎么让div居中
<div style=" position: fixed; top: 10px; left: 0; right: 0; width: 300px; height: 50px; background: red; margin: 0 auto;"> </div>关键代码:left: 0;right: 0;原创 2021-04-14 14:11:13 · 181 阅读 · 0 评论 -
CSS_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-04-10 10:00:14 · 102 阅读 · 0 评论 -
CSS_bootstrap响应式布局基础使用
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstra原创 2021-03-29 09:43:44 · 93 阅读 · 0 评论 -
CSS_点击input输入框后提示文字上移缩小
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div class="login"> &l..原创 2021-03-23 16:14:40 · 1384 阅读 · 1 评论 -
CSS_css选择器,选择所有子元素、最后一个、第一个、单数、双数、第n个、反选,nth-child,last-child,first-child
html<div class="list"> <div></div> <div></div> <div></div></div><style>.list div{ width: 500px; height: 20px; margin-top: 5px; border: 1px solid #000;}</style>选择全部.list div{ back原创 2021-03-22 11:36:32 · 6767 阅读 · 0 评论 -
CSS_css去掉input标签的默认样式,去除input点击样式
去掉input标签的默认样式,去除input点击样式outline: none;input { background: none; outline: none; border: none;}原创 2021-03-19 13:09:11 · 1164 阅读 · 0 评论 -
CSS_css中的position:absolute定位不起作用或者溢出父元素隐藏不了的问题
position介绍position:absolute是相对父元素进行绝对定位的,且该父元素必须定义有position的值(relative、absolute、fixed),若父元素没有定义有position,则是相对于body进行定位。position总的来说分为绝对定位和相对定位。值描述absolute绝对定位,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。并且该父元素必须设置有position属性,可以将position设置为relative原创 2021-03-16 15:28:18 · 2549 阅读 · 0 评论 -
VUE_vue去掉自带的body margin 8px
打开public下index.html文件添加以下css样式*{ margin: 0; padding: 0;}body,html{ margin: 0; padding: 0;}原创 2021-03-04 14:18:58 · 6518 阅读 · 2 评论 -
CSS_scss基本使用及操作函数使用
基本使用1、定义变量及变量使用常规使用 $var拼字符串 #{$var}用于计算 $var + $var/*** scss ***/$width: 1px;$width2: 2px;$pos: bottom;.aa { width: $width; // 常规使用 border-#{$pos}: 1px solid red; // 拼字符串}.bb { width: $width + $width2; // 用于计算}/*** css ***/原创 2020-12-25 10:19:45 · 1261 阅读 · 0 评论 -
CSS_css变量,css自定义属性
定义变量–变量名:变量值 --myvarible:red全局变量 使用 :root定义:root{ --myvarible:red}使用变量 color:var(--myvarible) //变量默认值 在--myvarible未定义的时候,使用va()函数第二个参数 color:var(--myvarible,blue)字符串–可以直接拼接//定义:root{ --a:'hello'; --b:'world';}//使用.my::after{ content:v原创 2020-12-21 17:35:36 · 89 阅读 · 0 评论 -
CSS_css文字超出显示省略号,单行,多行
单行:white-space:nowrap;overflow:hidden;text-overflow:ellipsis;多行:word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2020-12-18 16:00:29 · 136 阅读 · 1 评论 -
CSS_css距离顶部一定距离悬停
position: sticky;position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: -o-sticky;top: 1px; //距离顶部1px悬停原创 2020-11-12 10:40:38 · 1580 阅读 · 0 评论 -
CSS_用CSS给商品价格划线,css下划线,上划线,横线
横线style="text-decoration:line-through;" 下划线style="text-decoration:underline;"上划线style="text-decoration:over-line;"原创 2020-11-06 09:55:00 · 2477 阅读 · 0 评论 -
CSS_控制 video 标签的控制栏组件(隐藏、显示进度条、播放按钮、全屏按钮等)
当 video 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。<video controls></video>//全屏按钮video::-webkit-media-controls-fullscreen-button { display: none;}//播放按钮video::-webkit-media-controls-play-button { display: non原创 2020-10-20 14:54:25 · 7490 阅读 · 0 评论 -
CSS_如何设置滚动条样式_超出左右滚动
CSS-界面滚动时不显示滚动条设置滚动条的样式:div::-webkit-scrollbar { width: 0;}关于::-webkit-scrollbar::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.CSS滚动条选择器你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-sc原创 2020-08-10 14:00:12 · 2977 阅读 · 0 评论