css3
sol999
唯有不辜负,方能归初心
-----了不起的匠人
展开
-
记录chrom不同版本对前端兼容代码差异
上面:not()里加【&】写法在 chrome版本(111.0.5563.147)里不生效,但在最新chrome版本(112.0.5615.49,112.0.5615.50)里生效,具体暂时没查到为什么,感觉应该是写法的问题。查看chrome版本: chrome://version/(直接去查看会被更新为最新版本,这样不用更新)原创 2023-04-28 11:15:29 · 285 阅读 · 0 评论 -
各个浏览器的兼容处理及bug
firefox:1.字体可以无限小,其他浏览器最小为12px。处理:设置字体最小不小于12px原创 2021-09-09 17:33:41 · 92 阅读 · 0 评论 -
ie11的兼容bug----总览
1.select下拉标签 隐藏小箭头select::-ms-expand { display: none; }//隐藏下拉箭头select { padding-right: 36px; background: url(../images/select-down.png) right center no-repeat; background-size: 38px; -webkit-appearance: none; -moz-appearance: none;原创 2020-07-29 17:27:11 · 281 阅读 · 0 评论 -
uni-app 制作 物流信息 step样式表
<block v-if="logistic && logistic.State != 4" v-for="(item,index) in logistic.Traces"> <view class="set_box view-flex view-flex-between" > <view class="set-left vie...原创 2019-08-29 19:30:20 · 2897 阅读 · 1 评论 -
微信小程序 css样式 : 书本页面立体样式 前大后小,自定义收缩高度
//小程序中:befor 跟 :after位置都在block2_1上面,befor最前,after中间 //网页中:block2_1在before跟after中间 //根据页面需求调大小,文本根据多少可自定义收缩高度.block2_1{ position:relative; width:92vw; min-height:21vh; height:auto; box-sh...原创 2018-02-10 17:39:47 · 1896 阅读 · 0 评论 -
小程序录音后播放wx.createInnerAudioContext停止事件坑
最近被小程序的录音->播放坑惨了,赶紧总结下,希望对正在做录音事件的小伙伴们有帮助//开始录音startRecord:function(){ var that = this; const recorderManager = wx.getRecorderManager() const options = { duration: 6000, s原创 2018-01-09 17:53:06 · 15108 阅读 · 3 评论 -
input框placeholder颜色设置
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #e2dfdf; }input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #e2dfdf;}input:-ms-input-placeholder{ color: #e2dfdf;}原创 2017-12-25 11:35:00 · 591 阅读 · 0 评论 -
小程序 animation用setInterval动画循环,录音按钮的播放效果
//index.wxml <view class="block2_2_img_box" > <image src="{{horn1Src}}" mode="widthFix" class='block2_2_img_box_img1'></image> <image src="{{horn2Src}}" mode="widt原创 2017-12-20 15:25:17 · 2636 阅读 · 0 评论 -
input框 placeholder变色,及去掉苹果手机默认input样式,css去除点击阴影
placeholder变色.invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; }.invalid::-moz-placeholder { /* Mozilla Firefox 19+ */ color: red;}input.invalid:-ms-input-placeholder{原创 2017-08-30 12:11:21 · 1255 阅读 · 0 评论 -
ios 不支持live (click)事件的方法
给需要绑定的标签添加css样式{cursor:pointer},让他认为你是一个可以点击的标签,这样就可以了或直接在标签中加入 onclick事件原创 2017-09-28 14:55:38 · 855 阅读 · 0 评论 -
html页面的一些特殊符号
一下我总结了一些在页面中经常遇到的小ico图标,可以直接复制过去用哦 引用块内容● ━━➤ ︿ ﹀原创 2017-09-01 16:30:51 · 1498 阅读 · 3 评论 -
table表格中行与行间距
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值描述separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。inherit规定应该从父元素继承 border-collapse原创 2017-09-01 16:22:08 · 9150 阅读 · 0 评论 -
字体样式
英文字体:font-family: ‘Calibri’, ‘Segoe UI’,’Verdana’,’Tahoma Arial’;原创 2017-08-30 12:16:08 · 392 阅读 · 0 评论 -
inline-block在ie兼容性问题
inline-block是CSS2.1属性,而大家经常会这么处理ie6、7下的inline-block.selector { display: inline-block; *display: inline; *zoom: 1; }原创 2017-08-30 12:15:39 · 328 阅读 · 0 评论 -
css动态效果引用
fadeIn @-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes fadeIn{from{opacity:0}to{opacity:1}}fadeInDown @-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,原创 2017-08-30 11:59:24 · 629 阅读 · 0 评论 -
背景色左右透明度渐变
background-image: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background-image: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);原创 2017-08-30 11:35:12 · 1266 阅读 · 0 评论 -
页面滚动条颜色样式
/滚动条颜色///滚动条整体 ::-webkit-scrollbar { width: 14px; height: 14px; } //滚动条轨道,滚动条小方块 ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } ::-we原创 2017-08-30 11:45:12 · 976 阅读 · 0 评论 -
多行文本显示省略号方法:
多行文本显示省略号方法: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //文本行数 overflow: hidden;文字不换行,超出部分用省略号代替:顺序不能颠倒,三者必须同时存在 overflow:hidden; text-overflow:ellipsis; white-sp原创 2017-09-04 15:35:39 · 385 阅读 · 0 评论