
CSS3
文章平均质量分 65
山间有水
不想成为大佬的小菜鸟不是好菜鸟
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
ios手机中input框失去焦点之后不能再次输入
问题描述一个弹出层中有input输入框,第一次输入内容后ios键盘收起,再次点击input框输入内容时获取不到焦点原因在弹出层点击input时调起键盘,页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位。安卓手机点击时调起键盘不会把页面顶上去,会改变窗口高度变化,收起时不会造成影响。解决办法$('input,s...原创 2019-12-10 20:08:36 · 826 阅读 · 0 评论 -
解决pc端鼠标浮上二态闪烁问题
问题描述最近遇到一个pc端的小bug,一个按钮的hover二态是一个序列帧动画,页面刷新后鼠标浮到按钮上二态的动画有一个明显的闪烁,这让我的体验就很不好了,更别说用户了。之前也遇到过二态闪烁的情况,但是那个二态是一张静态图,直接用雪碧图合并一下就OK了,但是这次是一个序列帧动画呀,没办法合并,怎么办呢?找闪烁的根本原因呗根本原因hover的时候图片要加载显示到页面上,在加载的时候就会闪烁一下...原创 2019-11-21 21:47:19 · 320 阅读 · 0 评论 -
解决伪元素设置图片鼠标浮上会闪烁问题
问题描述:4个导航按钮,都有hover二态,在某些情况下我需要把按钮图片放在伪类里,在谷歌浏览器上刷新后鼠标浮上图片会闪一下,下面是css代码 &:nth-of-type(1) { top: 33px; &:after { width: 20px; height: 86px; pos...原创 2019-11-02 19:50:33 · 627 阅读 · 0 评论 -
用CSS实现类似信纸一样的虚线
先提需求吧设计稿文案中每行文字下面都有一行虚线作为分隔,找了一张图,大致就如下一时间我咋搞,没想法呀,文案要是有规律,一句话就一行那还好办一句话一个p标签,给p标签设置border-bottom,关键是这有的文案一句话要占好几行,有的一句话一行,总不能编辑改完我再一个个修吧,是电视剧不好看还是公司不care效率呀,这且不说,代码写成这,自己能跟自己过的去吗?只能想办法了。。。(双端pc+移动...原创 2019-11-02 18:16:58 · 2805 阅读 · 0 评论 -
使用pointer-events禁止某个元素的hover状态
一、前提:一个列表的切换按钮,在鼠标浮上的时候有二态显示,点击按钮直到列表的尽头时,按钮会被禁止点击,但是这个时候鼠标浮上还会有二态显示,怎么办呢?这个时候我需要在鼠标浮上的时候:hover不起作用二、解决办法:pointer-events在这个按钮被禁止的时候设置pointer-events:nonepointer-events取值:对于浏览器来说,只有auto和none两个值可用,其...原创 2019-10-23 20:47:34 · 2820 阅读 · 0 评论 -
canvas圆形进度球html5水波动画特效
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>canvas圆形进度球html5水波动画特效</title> <style type="text/css"> #c { ...原创 2019-09-14 18:50:23 · 1173 阅读 · 0 评论 -
小程序去除button按钮的自定义样式
小程序去除button按钮的自定义样式小程序的button的变宽样式设在它的伪类上,所以要在伪类上去除样式button::after {border: none;}欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对M...原创 2019-04-20 15:04:26 · 937 阅读 · 0 评论 -
CSS清除浮动
前提背景:最近在写小程序项目,在首页用到轮播图,就用了swiper组件,但是swiper组件用了绝对定位,脱离了文档流清除浮动的原因:父元素的高度是由子元素撑开的,子元素设置浮动,父元素没有设置,子元素会脱离标准的文档流,如果不清除浮动,父元素的高度不能被撑开。微信小程序清除浮动的办法如下:在脱离文档流的元素外面包裹一个div class设置为clear1、.cle...原创 2019-04-03 09:01:56 · 194 阅读 · 0 评论 -
仿淘宝的详情页图片切换
鼠标放在小图片上,上面的大图会切换到相应的图片html代码:css代码:js代码:原创 2018-05-10 17:22:50 · 4440 阅读 · 0 评论 -
vertical-align设置文字与textarea的对齐方式
1. 2.vertical-align:middle;3.vertical-align:bottom;4.vertical-align:baseline;要了解更多关于vertical-align的属性,可以参考http://www.zhangxinxu.com/wordpress/?p=813原创 2018-05-09 23:52:26 · 6852 阅读 · 0 评论 -
如何让div平铺整个屏幕
解决方法:html,div{ width:100%; height:100%; background:yellow;}因为:1、如果要以百分比设置元素(div)的尺寸,必要以父元素的尺寸作为参考,如果父元素没有设置尺寸,那么子元素(div)尺寸自然不会生效。2、所以如果设置div的高度为100%,那么他的参考元素就是是body,那么如何设置body的尺寸呢?3、在怪异模式下,bo...原创 2018-04-22 20:40:51 · 5684 阅读 · 0 评论 -
css如何实现背景透明,文字不透明
css如何实现背景透明,文字不透明?之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用。 背景透明,文字不透明的解决方法: 为元素添加一个绝对定位的子元素,设置大小和该元素一样,把半透明加在绝对定位元素上作为遮罩,z-index设置到最底部,达到背景半透明效果。使用CSS3新属性rgba。 实...转载 2018-04-12 18:20:32 · 5081 阅读 · 0 评论 -
css设置文本省略号
text-overflow:-o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;用这几行代码可以设置出后...原创 2018-03-27 15:40:32 · 445 阅读 · 0 评论 -
-ms-touch-action是什么呢
规定用户能否以及如何操作页面上的指定区域注意:在IE11使用属性,在IE10应使用-ms-touch-action,IE10之前的浏览器不支持语法:touch-acion: auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]属性值:auto:默认值。浏览器允许一些手...转载 2018-03-30 08:17:34 · 3500 阅读 · 0 评论 -
CSS3中backface-visibility的属性
backface-visibility有两个属性:hidden和visible在下面例子中hidden是把被旋转div的背面隐藏,而visible是将其显示直接看例子吧:<!DOCTYPE html><html><head><style>div{position:relative;height:60px;width:60px;border:1px s...原创 2018-03-22 20:17:29 · 2420 阅读 · 0 评论