这几个CSS 技巧大神看了都说好！
导读：这几个CSS 技巧大神看了都说好！ 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ img.desaturate { filter: grayscale(100% ; -webkit-filter: grayscal...
这几个CSS 技巧大神看了都说好！
1. 黑白图像
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？
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. 页面顶部阴影
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.所有一切都垂直居中
html, body {
height: 100%;
margin: 0;
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
看，是不是很简单。
注意：在IE11中要小心flexbox。
5. 逗号分隔的列表
让html列表项看上去像一个真正的，用逗号分隔的列表：
ul >
li:not(:last-child)::after {
content: ",";
对最后一个列表项使用 :not() 伪类。
6.对图标使用 SVG
我们没有理由不对图标使用SVG：
.logo {
background: url("logo.svg");
SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
7.禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
.disabled {
pointer-events: none;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 这几个CSS 技巧大神看了都说好！
本文地址： https://pptw.com/jishu/668175.html