css
文章平均质量分 58
sir.山
每天写一点
展开
-
浏览器滚动条样式终极方案
首先各个浏览器滚动条保持统一是不可能的,因为浏览器不支持大多数滚动条样式属性从支持可调整的角度来看,我们一般选择所以这里有二个方案自行选择。原创 2024-04-09 15:30:40 · 851 阅读 · 0 评论 -
多行文本 展开收起
https://zhuanlan.zhihu.com/p/373359523<div class="content_box"> <input type="checkbox" id="exp"> <div class="content word" line-clamp="2"> <label class="btn" for="exp"></label> {{orderInfo.originalCont原创 2021-12-28 09:00:00 · 377 阅读 · 0 评论 -
transition与animate动画区别
transition(过渡)transition: property duration timing-function delay;值描述transition-property规定设置过渡效果的 CSS 属性的名称。transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing-function规定速度效果的速度曲线。transition-delay定义过渡效果何时开始。animate简写:animati原创 2021-08-04 15:23:15 · 620 阅读 · 0 评论 -
LCD液晶字体
大屏或是web使用,LCD液晶字体使用方案:去 dafont下载.ttf格式字体,输入0123456789,点击下载(图一)通过fontconverter或者fontsquirrel.com来生成.woff等格式的字体(第二个连接似乎更好用,图二)正常导入.woff文件图一:图二:...原创 2020-11-26 10:57:29 · 4170 阅读 · 1 评论 -
弧形背景和倒计时优化
弧形背景.pure_top { width: 100%; height: 100px; position: relative; z-index: 0; overflow: hidden;}.pure_top::after { content: ''; width: 120%; height: 100px; position: absolute; left: -10%; //椭圆左边隐藏10%,右边隐藏10% top: 0; border-radi原创 2020-10-21 00:10:02 · 189 阅读 · 0 评论 -
css背景图片裁剪
先提一下小程序对于背景图片是识别要用http路径去显示alt + shift + f 格式化小程序代码裁剪方式background-clip:border-box;/* 表示从边框向外裁剪背景,border-box是background-clip的默认值 */background-clip:padding-box;/* 表示从内填充(padding)向外裁剪背景 */backgroun...原创 2019-01-08 19:59:24 · 7600 阅读 · 5 评论 -
css3三角形
CSS3三角形实现原理在css3中,我们主要使用的是一个transparent的属性,意思是透明的,比如我们将字体设置为黑色会写color:black,那么如果想把字体的颜色设置为透明,我们可以写color:transparent。同理background-color:transparent可以设置背景为透明。三角形8种分类8个方向1.triangle up 上三角形#trian...原创 2019-01-08 20:11:49 · 1873 阅读 · 0 评论 -
css伪元素
1、伪元素:::before/:before 在某个元素之前插入一些内容;::after/:after 在某个元素之后插入一些内容;::first-letter/:first-letter 为某个元素中的文字的首字母或第一个字使用样式;::first-line/:first-line 为某个元素的第一行文字使用样式;::selection 匹配用户被用户选中或者...原创 2019-03-21 00:21:37 · 228 阅读 · 0 评论 -
CSS3代码实现switch滑动开关按钮效果
直接上代码:css.my_switch { display: none;}.my_switch+label { display: inline-block; box-sizing: border-box; height: 20px; min-width: 60px; line-height: 16px; vertical-align: middle; bor...原创 2019-09-03 16:41:48 · 1068 阅读 · 0 评论