用css 实现凹陷的线条

box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset,0 -1px 0 rgba(0,0,0,.2) inset; 因为颜色为透明颜色,所以颜色是什么样的,不用管,只需要调整水平方向和垂直方向的数值…

使用CSS 绘制出 1px 的边框,在移动端上渲染的效果会出现不同,部分手机发现1px 线条变胖了,这篇文章整理2种方式实现1px 像素线条. 1.利用box-shadow + transform <style> span.onepixel{ width: 300px;position: relative;top:50px; } span.onepixel::after { content: ''; width: 300px; position: absolute; bottom: ; lef…

css 画竖着线条

<p>table控制:<table width=700> <tr> <td>横线</td></tr><tr bgcolor='red' height=3> <td></td></tr></table><t…

使用css实现导航下方线条随导航移动效果

HTML部分 <ul> <li><a href="">第一条</a></li> <li><a href="">第二条</a></li> <li><a href="">第三条</a></li> <li><a href="">第四条</a>&…

css 按钮凹陷的感觉

.login-btn{ margin-top: 60rpx !important; background-color:transparent !important; width: 40%; margin: 0 auto; border-bottom: 1px solid #aaa; color: #fff !important; border-radius: 265rpx; }…

高阶 CSS 技巧在复杂动效中的应用

最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现.其核心在于对渐变(Gradient)的究极利用. 完整的代码你可以看看这里 -- CodePen DEMO -- to the future By Jane Ori] 源代码还是非常非常复杂的,并且叠加了复杂的 SVG PATH 路径. 我尝试着将其稍微拆分成几小块,运用不同的 CSS 高阶技巧从另外一个方面方向重新实现了一遍.因为整个过程还是有非常多有意思的 CSS 技巧,本文…

【原】移动web点5像素的秘密

最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神的笔录,游戏也是人生,懂得思考的人生才会不断促使自己进步,详细我不清楚了,大概意思是这样:人这一辈子就一次,快乐很重要,人如何感受到快乐,说起来真的不难,有两个点,一点是“你能够让别人喜欢你”:另外一点是“跟好朋友一起时你能够卸下面具”,是怎么样的就怎么样.希望能给不开心的同学寻找一丝帮助~ 回到今…

移动web点5像素的秘密

最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神的笔录,游戏也是人生,懂得思考的人生才会不断促使自己进步,详细我不清楚了,大概意思是这样:人这一辈子就一次,快乐很重要,人如何感受到快乐,说起来真的不难,有两个点,一点是"你能够让别人喜欢你":另外一点是"跟好朋友一起时你能够卸下面具",是怎么样的就怎么样.希望能给不开…

移动web点5像素的秘密（转）

最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神的笔录,游戏也是人生,懂得思考的人生才会不断促使自己进步,详细我不清楚了,大概意思是这样:人这一辈子就一次,快乐很重要,人如何感受到快乐,说起来真的不难,有两个点,一点是“你能够让别人喜欢你”:另外一点是“跟好朋友一起时你能够卸下面具”,是怎么样的就怎么样.希望能给不开心的同学寻找一丝帮助~ 回到今…

SVG动画-基础篇

参考资料: http://www.w3school.com.cn/svg/index.asp https://msdn.microsoft.com/zh-cn/library/gg193979 简介 SVG 指可伸缩矢量图形.是使用 XML 来描述二维图形和绘图程序的语言. SVG 代码的根元素是以 <svg> 元素开始,</svg>结束.width 和 height 属性可设置 SVG 文档的宽度和高度.version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 S…