20个非常实用的个非常实用的CSS技巧技巧
主要为大家详细介绍了20个非常实用的CSS技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文为大家分享了20个非常实用的CSS技巧，供大家参考，具体内容如下
1. 黑白图像黑白图像
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？
CSS Code复制内容到剪贴板
1. img.desaturate {
2. filter: grayscale(100%);
3. -webkit-filter: grayscale(100%);
4. -moz-filter: grayscale(100%);
5. -ms-filter: grayscale(100%);
6. -o-filter: grayscale(100%);
7. }
8.
2. 使用使用 :not() 在菜单上应用在菜单上应用/取消应用边框取消应用边框
先给每一个菜单项添加边框
CSS Code复制内容到剪贴板
1. /* add border */
2. .nav li {
3. border-right: 1px solid #666;
4. }
5. ……然后再除去最后一个元素……
6.
7. // remove border /
8.
9. .nav li:last-child {
10. border-right: none;
11. }
12. ……可以直接使用 :not() 伪类来应用元素：
13.
14. .nav li:not(:last-child) {
15. border-right: 1px solid #666;
16. }
这样代码就干净，易读，易于理解了。
当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：
CSS Code复制内容到剪贴板
1. ..nav li:first-child ~ li {
2.
3. border-left: 1px solid #666;
4. }
5.
3. 页面顶部阴影页面顶部阴影
下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果：
CSS Code复制内容到剪贴板
1. body:before {
2. content: "";
3. position: fixed;
4. top: -10px;
5. left: 0;
6. width: 100%;
7. height: 10px;
8.
下载后可阅读完整内容，剩余5页未读，立即下载
weixin_38692043
- 粉丝: 9
- 资源: 947
我的内容管理
展开
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解：基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例：初学者入门教程
- Eclipse平台上的可视化开发：使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解：网络存储架构与管理
- 递归算法解析：文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式：用PHP编写Shell脚本教程
- MyBatis与Spring完美整合：1.0.0-RC3详解
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
