前端实用的CSS3技巧有哪些

本文小编为大家详细介绍“前端实用的css3技巧有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一、黑白图像

当你需要让一张彩色的图片显示为黑白照片的时候，你可以用下面的一段代码。

img.desaturate{

filter: grayscale(100%);

-WEBkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

前端比较实用的 CSS3 技巧，总有一个是你需要的！

二、使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

前端比较实用的 CSS3 技巧，总有一个是你需要的！

.nav li{

border-right: 1px solid #666;

然后再除去最后一个元素

.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

三、页面顶部阴影

给网页加上漂亮的顶部阴影效果

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;

前端比较实用的 CSS3 技巧，总有一个是你需要的！

四、给 body 添加行高

不需要给别给 p,h之类的添加行高，直接：

body{

line-height: 1;

五、所有一切都垂直居中

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

六、逗号分隔列表

让HTML列表项看上去像被一个真正的，分隔的列表

ul > li:not(:last-child)::after{

content: "，";

七、使用负的 nth-child 选择项目

在 css 中使用负的 nth-child 选择项目1到项目n

li{

display: none;

li:nth-child(-n+3){

display: block;

八、对图标使用 SVG

.loGo{

background: url("logo.svg");

九、优化显示文本

有时候，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你

html{

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizelegibility;

读到这里，这篇“前端实用的CSS3技巧有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网JavaScript频道。