黑白图像
这段代码会让你的彩色照片显示为黑白照片,是不是很酷?
img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
2、使用:not()在菜单上应用/取消应用边框
先给每一个菜单项添加边框
/* add border */ .nav li { border-right: 1px solid #666; }
然后再除去最后一个元素
// remove border / .nav li:last-child { border-right: none; }
可以直接使用 :not() 伪类来应用元素:
.nav li:not(:last-child) { border-right: 1px solid #666; }
这样代码就干净,易读,易于理解了。
当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):
.nav li:first-child~li { border-left: 1px solid #666; }
3、页面顶部阴影
下面这个简单的 css 代码片段可以给网页加上漂亮的顶部阴影效果:
body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8); box-shadow: 0px 0px 10px rgba(0, 0, 0, .8); z-index: 100;}
4、对图标使用 SVG
我们没有理由不对图标使用 SVG:
logo { background: url("logo.svg"); }
SVG 对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到 IE9。这样可以避开.png、.jpg 或.gif 文件了。
SVG 对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到 IE9。这样可以避开.png、.jpg 或.gif 文件了。
5、对纯 CSS 滑块使用 max-height
使用 max-height 和溢出隐藏来实现只有 CSS 的滑块:
slider ul { max-height: 0; overflow: hidden; } slider:hover ul { max-height: 1000px; transition: .3s ease; }
本文仅为转发学习使用,若侵犯到您的权益,请联系我立即删除!
原文链接:http://www.phpxs.com/code/1009945/