1.黑白图像此代码将使您的彩色照片显示为黑白照片,是不是很酷?2.使用:not()在菜单上应用/取消应用边框首先为每个菜单项添加边框...然后删除最后一个元素...您可以直接使用:not()伪类来应用元素:这样代码就干净、可读且易于理解。当然,如果你的新元素有兄弟元素,你也可以使用通用兄弟选择器(~):3.下面简单的css3代码片段可以给网页添加漂亮的顶部阴影效果:4.给body添加行-height您不需要分别为每个p、h标签等添加行高。只需添加到正文:这样文本元素可以很容易地从正文继承。5.垂直居中所有元素垂直居中太简单了:看,很简单。注意:小心IE11中的flexbox。6.逗号分隔列表使html列表项看起来像一个真正的逗号分隔列表:对最后一个列表项使用:not()伪类。7、使用负nth-child来选择item在CSS中使用负nth-child来选择item1到itemn。8.将SVG用于图标没有理由不将SVG用于图标:SVG可以很好地适应所有分辨率类型并支持所有浏览器回到IE9。这避免了.png、.jpg或.gif文件。9.优化显示文本有时字体可能无法在所有设备上以最佳方式显示,因此让设备浏览器帮助您:注意:请负责任地使用optimizeLegibility。此外,IE/Edge不支持文本呈现。10.对纯CSS滑块使用max-height使用max-height和overflowhidden来实现纯CSS滑块:11.继承box-sizing让box-sizing继承html:这种方式在插件或其他利用其他行为的组件中它会更容易改变盒子的大小。12.表格单元格中等宽的表格工作起来很麻烦,所以一定要使用table-layout:fixed尽可能保持单元格宽度相同:13.使用Flexbox摆脱各种hacks外边距。当需要列分隔符时,使用flexboxspace-between属性,您可以摆脱第n个、第一个和最后一个子元素的hacks:现在,列表分隔符将出现在均匀间隔的位置。14.当a元素没有文本值,但href属性有链接时,使用空链接的属性选择器来显示链接:相当方便。15.检测鼠标双击HTML:CSS:16.CSS写三角形使用border写三角形代码,兼容IE6.17。CSS3calc()calc()的用法类似于一个函数,可以为元素设置动态值:18.文字渐变文字渐变效果很流行,使用CSS3可以轻松实现:19.禁用鼠标事件CSS3中新的指针事件允许您禁用元素的鼠标事件。例如,如果链接设置为以下样式Can'tclickanymore。20.BlurText简单但漂亮的文字模糊效果,简单又漂亮!
