![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 70
羽筠
这个作者很懒,什么都没留下…
展开
-
vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法
一般在开发时,设置了 date/time/datetime 类型的 input 属性 placeholder 时,发现实际展示中却并不生效,处理逻辑,判断表单项未设置值时,则设置伪类样式,文本内容为 placeholder 属性值,展示样式重叠在表单项组件上,以达到提示文本效果;原创 2024-04-08 17:49:09 · 417 阅读 · 1 评论 -
小技巧或小BUG记载处理
小技巧或小BUG记载处理1、ios中input设置readonly后仍然聚焦出现光标并弹出“完成”面板问题2、ios系统版本15.1环境下,图片四周出现阴影边框设置样式-webkit-tap-highlight-color:rgba(0,0,0,0);同时,也要加上tap-highlight-color:rgba(0,0,0,0);3、禁止微信浏览器调整页面字体大小原创 2022-02-16 15:47:26 · 480 阅读 · 0 评论 -
CSS 图片遮罩 -webkit-mask
渐变遮罩-webkit-mask: linear-gradient(#000, transparent);图片遮罩语法与 background 相同:-webkit-mask: url(xxx.png) repeat center top;-webkit-mask-size: contain;也可分别设置属性:-webkit-mask-image: url(xxx.png);-webkit-mask-repeat: no-repeat;-webkit-mask-position: cente原创 2022-02-07 17:44:12 · 7846 阅读 · 0 评论 -
微信小程序-收藏
.wxss样式代码swiper .wx-swiper-dots { width: 100%; padding-left: 20rpx; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}swiper .wx-swiper-dot { width: 10rpx;...原创 2019-12-10 14:14:25 · 1088 阅读 · 0 评论 -
CSS3之:object-position/object-fit深入了解
object-fit和object-position之间的关系有点类似于background-size和background-position,无论是,关系还是属性值,都有相似之处,因此,我们在理解object-fit和object-position的时候,可以或多或少映射background-size和background-position。object-fit理解object-fi原创 2017-05-25 16:34:20 · 3196 阅读 · 0 评论 -
循环展示图片(画中画效果)
循环展示图片(画中画效果),页面展示效果就是每次显示两张叠加起来的图片,上面的一张图在下面的图的里面,画面不断的缩小,当下面的一张图缩放到窗口大小时它自己切换成上面的图片,叠加在另一张新加载的图片(下面的图)的上面最先设计的一版是用JS定时器不断控制HTML中两张图片的大小、定位信息的,为了使其看上去有不间断的变化效果,加上了CSS3过渡的效果,此功能实现的所有HTML/CSS/JS都直接原创 2017-07-06 16:50:41 · 3361 阅读 · 0 评论 -
常用收藏(自己用的)
PC端&移动端的页面常用的到的CSS、JS、HTML收藏(自己用的)原创 2015-12-04 15:31:14 · 15965 阅读 · 1 评论 -
移动端H5页面,上下滑动翻页
移动端H5页面,上下滑动翻页向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口向下滑动进入前一页 , 当前页(加CSS样式outDown)向下移动移出窗口 ,下一页(加CSS样式inDown)向下移动进入窗口同时设置1秒以后(setTimeout(function(){......},1000);)才可(根据canT...原创 2017-09-26 15:10:02 · 48722 阅读 · 24 评论 -
常用css动画整理收藏
经常用到的动画效果编写后留存整理,方便以后直接使用/* 向左移动并弹性显示 */@-webkit-keyframes fadeToLeftTan{ 0%{ -webkit-transform:translateX(100%); opacity:0;} 70%{ -webkit-transform:translateX(-5%); opacity:1;} 80%{ -webkit-transform:translateX(2%); opacity:1;} 90%{ -webkit-trans.原创 2018-01-26 17:19:09 · 1580 阅读 · 0 评论 -
CSS3设置元素显示3D效果
显示效果:以下是图片素材以下是页面代码部分<!doctype html><html><head><meta charset="utf-8"><title>CSS3设置图片显示3D效果</title><meta charset="UTF-8">原创 2018-07-25 10:07:09 · 2806 阅读 · 0 评论 -
设置了border-radius的元素overflow:hidden失效解决方法
父元素设置圆角、overflow:hidden之后,当子元素中设置了transform后,父元素的overflow:hidden在圆角的地方失效了,解决方法:父元素加:position:relative; z-index:1; 就可以了demo代码如下:<!DOCTYPE html><html><head><meta charset="UT...原创 2018-07-30 17:56:47 · 2472 阅读 · 0 评论 -
苹果手机输入框聚焦时右侧或下方出现线条解决方法
苹果手机input框设置了border:none,当聚焦时右侧或下方出现了线条,解决方法:将 border:none 改为 border:rgba(0,0,0,0) solid 1px;也不是每个页面都会出来这样的情况,但出现了还是要解决的不知道原因就要排查解决呀,将HTML、CSS中的代码逐步删除测试,最终发现把border:none去掉后就没有线条了,还是花了不少时间的对于同样遇到...原创 2019-06-07 11:41:33 · 1903 阅读 · 0 评论 -
小程序单位:rpx、rem的具体使用方法及算法
小程序单位:rpx、rem的具体使用方法及算法1)rpx:不论哪个型号的手机,屏幕宽度都是750rpxrpx与px的转换,根据设计稿换算例如:设计稿750px宽度,ps上量出宽度是多少,那么就定义多少rpx,也就是,1px = 1rpx例如:设计稿640px宽度,那么需要转换一下,1px = 750/640rpx2)rem:根据设计稿换算例如:设计稿750px宽度,那么1r原创 2017-05-11 18:21:50 · 2717 阅读 · 0 评论 -
web前端-移动端小技巧
移动端,数字去除电话格式,头部加 移动端,某区域设置有滚动条时,解决滚动不顺畅问题,实现弹性滚动,加样式 :overflow-y:auto; -webkit-overflow-scrolling:touch;移动端,给元素加click事件没反应时,加样式:cursor:pointer;试试看移动端,当你点击一个链接或者通过Javascript定义的可点原创 2015-08-13 17:50:08 · 1232 阅读 · 0 评论 -
calc():css简单的数学运算–加减乘除
calc():css简单的数学运算–加减乘除多好的东西啊,不用js,一个css就解决了。.box{border:1px solid #ddd;width:calc(100% - 100px);background:#9AC8EB;}3栏等宽布局。.box{margin-left:20px;width:calc(100%/3 - 20px);}原创 2015-12-04 15:12:35 · 8759 阅读 · 0 评论 -
文本显示 -- 换行处理
强制英文换行word-break:break-all !important; word-wrap:break-word !important; white-space:pre-wrap !important;不换行,超出的部分用...代替overflow:hidden; white-space:nowrap; text-overflow:ellipsis;设置行数,超出的部分用...代替overflow : hidden;text-overflow: ellipsis;di.原创 2015-12-04 15:23:08 · 1482 阅读 · 0 评论 -
CSS设置字体
在网页上使用苹方字体(苹果设备上的字体):http://note.rpsh.net/posts/2015/11/18/using-pingfang-font-in-website/CSS设置字体.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }原创 2015-12-04 17:47:03 · 755 阅读 · 0 评论 -
CSS选择器有哪些
CSS选择器有哪些**通用选择器:选择所有元素,不参与计算优先级*,兼容性IE6+#X id选择器:选择id值为X的元素,兼容性:IE6+.X 类选择器: 选择class包含X的元素,兼容性:IE6+X Y后代选择器: 选择满足X选择器的后代节点中满足Y选择器的元素,兼容性:IE6+X 元素选择器: 选择标所有签为X的元素,兼容性:IE6+:link,:visite原创 2016-05-10 16:19:50 · 6684 阅读 · 0 评论 -
改变复选框显示样式
改变复选框显示样式原创 2015-08-10 11:24:44 · 1035 阅读 · 0 评论 -
实现对话框的小三角
html + css实现类似对话框的小三角原创 2015-08-10 11:40:20 · 2164 阅读 · 0 评论 -
clear:both新用法,不再加新的标签啦
clear:both新用法,不再加新的标签啦版一:.clearfix:after { content:""; display:block; height:0; clear:both; } .clearfix {*zoom:1;}/*IE/7/6*/版二:.clearfix:before,.clearfix:afte原创 2015-12-04 15:17:45 · 959 阅读 · 0 评论 -
CSS3实现雪碧图动画
CSS3实现雪碧图动画注意几点:steps(22) 是关键哦关键帧只需设置0%(background-position:0 0;),100%(background-position:-2200px 0;)动画均匀地分22段执行,每次都有固定相等的偏移量雪碧图由22张图片拼成的雪碧图的宽度是设置动画盒子的22倍以下CSS:.test{ wi原创 2016-03-24 15:55:39 · 5987 阅读 · 0 评论 -
CSS之响应式Web设计(横屏/竖屏提醒)
方向:横屏/竖屏结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。语法:orientation:portrait | landscapeportrait:指定输出设备中的页面可见区域高度大于或等于宽度landscape: 除portrait值情况外,都是landscape实例:<style>/*竖屏*/@...原创 2015-12-10 16:58:15 · 4713 阅读 · 0 评论 -
CSS3 Filter兼容性表
CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解CSS3 Filter兼容性表SVG effect for HTML兼容性表转载 2016-06-16 10:27:27 · 6778 阅读 · 0 评论 -
在网页上使用苹方字体
苹方提供了六个字重,font-family 定义如下:苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;苹方-简 极细体font-family: PingFangSC-Ultralight, sans-serif;苹方-简 细体font-family: PingFangSC-Light, sans-serif;苹方-转载 2016-11-21 10:08:21 · 52696 阅读 · 0 评论 -
使用CSS修改HTML5 input placeholder颜色
使用CSS修改HTML5 input placeholder颜色input::-webkit-input-placeholder{ color:#fff;}input::-moz-input-placeholder{ color:#fff;}input::-o-input-placeholder{ color:#fff;}input::-ms-input-placeholder{原创 2015-12-04 15:41:29 · 650 阅读 · 0 评论