css
文章平均质量分 55
Qssn丶
学无止境,码无尽头
展开
-
纯css实现文字下划线悬浮【中心向两边扩展】、鼠标移开【两边向中心收缩】特效
文字鼠标悬浮效果有很多,自己做的时候也手撸了一个小特效。思路就是使用before和after伪类去动态改变宽度。代码已经关联到github: 链接地址 觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:效果:...原创 2020-08-09 18:55:48 · 800 阅读 · 0 评论 -
Microsoft Edge中的底部border bug,鼠标悬浮上去的时候下边框消失问题
在stackoverflow找到了解决方案原文链接原因:如果高度或宽度是动态的并且没有四舍五入的像素大小就会出现问题解决1.设置 margin-bottom: -1px;2.设置border-bottom: 2px solid gray3.设置border-radius: 1px; //这种方法我在使用,不过答案并没有提及 @supports (-ms-ime-align...转载 2019-12-31 14:42:17 · 985 阅读 · 0 评论 -
CSS把边框 border变成内边框,就是不改变宽度高度
在区块内添加下面代码即可box-sizing转载 2017-07-12 10:43:09 · 14675 阅读 · 0 评论 -
js控制css中的帧动画, 使动画每点击一次运行一次
今天在模拟右侧栏向左滑出时,发现动画只会起作用一次,最后解决了~如下图解决思路是:动态添加class。css.moveAnimation{ animation:mymove 1s; }@keyframes mymove /*Safari and Chrome*/{ from {right:-400px;} to {right:0px;}}js(用的是react,动态添加class核...原创 2018-04-13 11:42:42 · 3839 阅读 · 0 评论 -
flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden,设置自身属性min-width:0也都不行。text-overflow: ellipsis;overflow-x: hidden;white-space: n...原创 2018-10-08 10:38:20 · 13647 阅读 · 7 评论 -
html表格table设置 border-collapse: collapse后,表格宽度大于父容器宽度的处理
先上结论:1. table-layout: fixed 2.在表格的第一行设置一个隐藏的设置的宽度是650,浏览器显示却是653,你需要在表格table标签设置一个属性table-layout: fixed,接着你会发现第一行单元格合并,后面tr中的td无论如何设置宽度都没有任何效果,所以你还需要在表格的第一行设置一个隐藏的行。...原创 2019-03-07 15:25:31 · 2131 阅读 · 0 评论 -
鼠标悬停改变滚动条样式(高度、宽度、颜色)
接到UE需求,需要对界面滚动条进行修改,主要是鼠标悬停改变颜色和大小,心里想着是比较简单的(万恶的IE肯定不在考虑范围内),谁知道愣是搞了半天才完成ORZ,直接上源码和实现图吧。css代码 ::-webkit-scrollbar{ height: 9px !important; width: 9px !important; ...原创 2019-03-07 19:06:37 · 11537 阅读 · 7 评论 -
CSS3 transform对普通元素z-index、positon和overflow的影响,
transform对普通元素的影响是个巨坑,自己亲身体验的总共有三点提升元素的垂直地位,也就是z-index会变大改变元素的定位属性,fixed变成absolute,absolute变成relative使绝对定位(absolute)的子元素受父元素overflow:hidden的作用。(ps:绝对定位(absolute)的子元素宽度大于父元素,如果父容器的定位是static,也就是默认时...原创 2019-07-19 15:16:14 · 1295 阅读 · 0 评论