zoukankan      html  css  js  c++  java
  • css小技巧

    每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功能。

      

    html {
    filter: grayscale(100%);//IE浏览器
    -webkit-filter: grayscale(100%);//谷歌浏览器
    -moz-filter: grayscale(100%);//火狐
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);//谷歌浏览器
    }

    给input的placeholder设置颜色

    ::-webkit-input-placeholder { /* WebKit browsers */
    color: #999;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999;
    }

    CSS :after 和:before选择器

    .clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

    写了这个clearfix,可以让外层div包裹整个内层,符合谷歌闭合机制。

    IE7和IE6中opacity是没有用的,在IE6中DIV透明的方法一般用filter;

    .haorooms{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}

    -webkit-line-clamp

    p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }

    自动换行

    div{
    word-wrap: break-word;
    word-break: normal;
    }

    强制英文单词断行

    div{
    word-break:break-all;
    }

    强制不换行

    div{
    white-space:nowrap;
    }

    模糊遮罩效率,模糊滤镜效果

    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);

  • 相关阅读:
    javascript学习一
    对软件工程课程的认识
    人月神话读后感
    项目开发总结报告(GB8567——88)
    MFC双缓冲绘图
    QT连接MySQL
    [QT学习]拷贝文件
    Arduino入门笔记【1】
    《人月神话》读后感以及软件工程总结
    十天冲刺任务(第二次冲刺)
  • 原文地址:https://www.cnblogs.com/myspecialzone/p/5960455.html
Copyright © 2011-2022 走看看