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);

  • 相关阅读:
    树形DP,最大直径,并查集——HDU4514
    树形DP——HDU2196
    树上倍增法,LCA——CF-832-D
    LCA,Tarjan——POJ1330
    树的直径,树形DP,DFS——POJ1958
    剑指offer28-最小k个数
    剑指offer27-数组中出现次数超过一半的数字
    剑指offer26-字符串的排列
    剑指offer25-二叉搜索树与双向链表
    剑指offer24-复杂链表的复制
  • 原文地址:https://www.cnblogs.com/myspecialzone/p/5960455.html
Copyright © 2011-2022 走看看