:nth-child是一个非常牛逼的伪类，如果你能很好的理解它就可以用CSS做出很多非常实用的效果。当我很年轻的时候还使用PHP的i++来实现一些东西，其实CSS完全可以实现。下面是我总结的一些用法，用了可爱的糖糖做演示，彩色头像就代表选中，T,T。仅选择第5个li:nth-child(5){...}如果选择第一个元素...

前言估计大家在日常工作中都会用到css形状，但是目前天朝中使用到最多的估计就是圆（circle）、椭圆（ellipse）、各种三角形形状，但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形，那么请前往百度百科，就算是我们用:after:before 这些伪元素来构造我们所需要的形状或者利用...

.monster{width:190px;height:240px;margin:2%auto;background:url('http://www.51dev.com//FileUpload/news/202004/20200418220700647.png')leftcenter;animation:play.8s...

box-shadow属性向框添加一个或多个阴影。这个CSS3的属性很常用，盒阴影、按钮状态等各种地方都有用到，但是你了解并记住各个参数的作用及用法吗？源码：http://codepen.io/yisi/pen/sDBwC语法：http://www.w3cplus.com/content/css3-box-shadow动...

仅仅利用mediaquery适配样式是远远不够的，并没有考虑触屏下的行为和特有的内容组织方式的不同。简单在桌面版基础上叠加mobile版的代码，会带来请求增多、流量、性能、代码冗余等诸多方面问题。有统计说86%的手机站看起来small其实体积比桌面版还大。我们这次充分发挥“响应”的灵活性，实现o...

基于CSS3实现瀑布流，使用CSS3的CSS多栏(Multi-column)。可以到github上下载源码: https://github.com/CraryPrimitiveMan/waterfall-css3瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动...

 一旦一个容器赋予了display:flex属性，将会有以下特点：项目无法设置浮动。列表的样式会被清除。无法使用vertical-align设置垂直对齐方式。目前互联网上关于flex流动布局的文章很少，搜索关于flex的文章，大部分还介绍的是旧的知识点，显然已经不符合当前的w3c标准了，要想了解flex的相关...

前端的定义应该是数据内容的展示，在国内大家都觉得前端只是HTML+CSS+Javascript，但是实际上与展示有关的都是前端，所以Ruby/Python/Nodejs/Java/ASP.NET只要和展示有关的部分都可以称之为前端。在这里由于篇幅的限制，我们只推荐与HTML+CSS+Javascript三者有关的前端技...

制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。1.css的transition。语法：transition:propertydurationtiming-functiondela...

渐变   有了渐变再也不用去切1px的图再重复了..   -webkit-是浏览器前缀,表示特定浏览器对一个属性还在实验阶段,在这里顺便写下各个浏览器的前缀:   chrome/safari  -webkit-...

//高宽分别对应横竖滚动条的尺寸::-webkit-scrollbar{width:16px;height:16px;}//内阴影和圆角::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:10px;}/...

/*水平翻转*/.flipx{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH();}/*垂直翻转*/.flipy{-moz-transform...

CSS3条件判断，听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话，你会发现CSS中的“@media”就是条件判断之一。是的，在CSS3的条件判断规范文档中包含了两个部分，其一是“@media”规则，主要用来“根据媒体属性区分样式表&...

本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是："border-radius:20px;"。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9以上。IE6、7、8不支持。在线预览效果：http://hovertree.com/texiao/css/4.htm画圆型的例子：http://...

CSS3-背景渐变 CSS3渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用CSS3的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。  ...