首页 > 开发 > CSS > 正文

20个非常实用的CSS技巧

2024-07-11 08:25:44
字体:
来源:转载
供稿:网友

本文为大家分享了20个非常实用的CSS技巧,供大家参考,具体内容如下

1. 黑白图像

这段代码会让你的彩色照片显示为黑白照片,是不是很酷?

CSS Code复制内容到剪贴板
  1. img.desaturate {        filter: grayscale(100%);   
  2.     -webkit-filter: grayscale(100%);        -moz-filter: grayscale(100%);   
  3.     -ms-filter: grayscale(100%);        -o-filter: grayscale(100%);   
  4. }      

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

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

CSS Code复制内容到剪贴板
  1. /* add border */   .nav li {   
  2.   border-right: 1px solid #666;    }   
  3. ……然后再除去最后一个元素……      
  4. // remove border /      
  5. .nav li:last-child {      border-right: none;   
  6. }    ……可以直接使用 :not() 伪类来应用元素:   
  7.    .nav li:not(:last-child) {   
  8.   border-right: 1px solid #666;    }   

这样代码就干净,易读,易于理解了。

当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):

CSS Code复制内容到剪贴板
  1. ..nav li:first-child ~ li {      
  2.   border-left: 1px solid #666;    }   
  3.   

3. 页面顶部阴影

下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果:

CSS Code复制内容到剪贴板
  1. body:before {              content: "";   
  2.           position: fixed;              top: -10px;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表