随笔分类 -  css

通过css旋转实现景深3d效果
摘要：transform: rotateY(-16deg) scale(.9); 阅读全文
posted @ 2024-09-24 16:58 Deer_Lin 阅读(29) 评论(0) 推荐(0)
css图片阴影、文字阴影
摘要：-webkit-filter: drop-shadow(0.5px 3.5px 0px rgba(7,22,42,0.48)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */ filter: drop-shadow(0.5px 3.5px 0px rgba(7,22, 阅读全文
posted @ 2024-08-16 17:35 Deer_Lin 阅读(41) 评论(0) 推荐(0)
单行、多行省略号处理
摘要：//一行省略号代替： overflow: hidden; white-space: nowrap; text-overflow:ellipsis; //两行省略号代替 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; //将对 阅读全文
posted @ 2024-01-15 11:20 Deer_Lin 阅读(45) 评论(0) 推荐(0)
uniapp引入iconfont真机nvue不生效（兼容vue）
摘要：兼容nvue 1.只能使用text标签<text class="iconfont" style="color: #fff;font-size: 28rpx;">&#xe6ec;</text> 2.App.vue设置，引入iconfont onLaunch() { // #ifdef APP-PLUS 阅读全文
posted @ 2023-10-10 10:55 Deer_Lin 阅读(624) 评论(0) 推荐(0)
uni app nvue text如何不换行
摘要：在css里添加lines:1 如果不行，增加宽度100%或者固定宽度 实在不行，试试一下代码 width: 370rpx; lines: 1; text-overflow: ellipsis; 阅读全文
posted @ 2023-08-02 16:27 Deer_Lin 阅读(836) 评论(0) 推荐(0)
vue 使用sass定义全局变量
摘要：一、安装以下依赖： npm i -D sass-loader@8.x -D npm i node-sass@4.14.1 -D npm i sass-resources-loader -D 二、新建文件：variables.scss $primary-color:#547fcd; $secondar 阅读全文
posted @ 2022-08-05 01:15 Deer_Lin 阅读(565) 评论(0) 推荐(0)
css设置html、body选择文字
摘要：html,body { -moz-user-select: none; -khtml-user-select: none; user-select: none; } 阅读全文
posted @ 2021-08-27 15:17 Deer_Lin 阅读(172) 评论(0) 推荐(0)
css设置鼠标hover效果
摘要：cursor: pointer； 预览：hover蓝色文字即可看到效果 hover文字区域，hover查看小效果 阅读全文
posted @ 2021-07-29 17:36 Deer_Lin 阅读(381) 评论(0) 推荐(0)
svg-icon修改颜色
摘要：1.找到相对应的svg文件 比如我使用的图标名：lights vue： <svg-icon icon-class="lights" class="set-svg-color" :style="{color:'#c3f432'}" /> 文件： 2.修改，将固定颜色改为自定义名称 3.增加样式 (1) 阅读全文
posted @ 2021-06-26 18:11 Deer_Lin 阅读(4592) 评论(0) 推荐(0)
隔行变色（奇数行变色、偶数行变色、n行分组，每组n行变色）
摘要：/* :nth-of-type(odd)奇数行 */ /* .el-table th:nth-of-type(odd), .el-table tr:nth-of-type(odd) { background: #d1ffec; } */ /* :nth-of-type(even)偶数行 */ /* 阅读全文
posted @ 2021-02-24 15:10 Deer_Lin 阅读(534) 评论(0) 推荐(0)
css3实现动画匀速、反复、运行、呼吸灯效果、旋转、上下悬浮移动、hover文字动效
摘要：/* 呼吸灯效果、匀速、反复 */ animation: shine 1s linear 0s infinite alternate; @keyframes shine { 0%{ opacity: 1; } 100%{ opacity: 0; } } /* 旋转效果、反复 */ animation 阅读全文
posted @ 2021-02-20 14:09 Deer_Lin 阅读(1454) 评论(0) 推荐(0)
ie兼容问题
摘要：#box{ color:red; /* 所有浏览器都支持 */ color:red !important;/* Firefox、IE7支持 */ _color:red; /* IE6支持 */ *color:red; /* IE6、IE7支持 */ *+color:red; /* IE7支持 */ 阅读全文
posted @ 2020-12-11 21:22 Deer_Lin 阅读(61) 评论(0) 推荐(0)
问题图片对图片设置对齐样式
摘要：img { vertical-align:text-top; } 垂直对齐一幅图像： vertical-align baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素 阅读全文
posted @ 2020-12-01 17:26 Deer_Lin 阅读(192) 评论(0) 推荐(0)
css 优化谷歌、火狐浏览器的滚动条样式
摘要：/* 谷歌美化滚动条 */ *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: #f3f4f9; border-radius: 2px; } *::-webkit-scr 阅读全文
posted @ 2020-09-30 09:03 Deer_Lin 阅读(987) 评论(0) 推荐(0)
css对文字的设置
摘要：1.字间距 letter-spacing: 3px; 2.首行空两个字符 text-indent: 2em;//必须为em为单位1em为一个字符 3.文字两端对齐。 text-align: justify; 4.文字单行超出部分为省略号 overflow: hidden; white-space: 阅读全文
posted @ 2020-08-29 09:06 Deer_Lin 阅读(538) 评论(0) 推荐(0)
解决父级display：flex后，子级元素高会跟随其他元素自动撑开问题
摘要：子级元素增加：align-self baseline; 阅读全文
posted @ 2020-08-28 17:12 Deer_Lin 阅读(1700) 评论(0) 推荐(0)
css实现字母转换大写
摘要：text-transform: uppercase; 阅读全文
posted @ 2020-08-21 10:05 Deer_Lin 阅读(532) 评论(0) 推荐(0)
设置display flex后，设置的宽度无效的解决办法--flex-shrink
摘要：我们在做flex布局的时候经常会遇到这种问题： 父级元素添加display:flex; 子集元素添加width：100px； 但是子集元素宽失效！！！！ css .flex-box{ display: flex; align-items: center; width: 300px; height: 阅读全文
posted @ 2020-07-13 22:23 Deer_Lin 阅读(7639) 评论(0) 推荐(0)