css 常用代码片段

刺骨的言语ヽ痛彻心扉 2022-08-21 07:52 200阅读 0赞

**全局背景变灰**

//特殊情况下网页整体背景变灰的处理
    html {
        filter: grayscale(100%);
    }
    //方案二：
    html {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale");
    }

**谷歌浏览器不支持12px以下字体的解决方案**

.chrome_adjust {  
            font-size: 9px;  
            -webkit-transform: scale(0.75);  
            -o-transform: scale(1);    //针对能识别-webkit的opera browser设置  
        }

**CSS背景图高斯模糊且全屏显示\`**

//1：使用CSS
    .bg{
        background-image:url(scale.jpg);
        -moz-background-size:100%100%; /*  Firefox 3.6 */-o-background-size:100%100%;/* Opera 9.5 */-webkit-background-size:100%100%;/* Safari 3.0 */background-size:100%100%;/*  Firefox 4.0 and other CSS3-compliant browsers */-moz-border-image:url(scale.jpg) 0; /* Firefox 3.5 */filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale');/* for < ie9 */}
    //2：使用 IMG 标签
    <img class="stock" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;" src="default.jpg">
    //补充方法
    //3：使用 CSS3 的背景 Cover
    .bg{
        background:#000url(scale.jpg) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

**给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;
    }

**IE6下块元素如何实现display:inline-block的效果？**

有两种方法：  
1、 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（…为省略的其他属性内容）：

div \{display:inline-block;…\}  
div \{display:inline;\}

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：

div \{ display:inline-block; \_zoom:1;\_display:inline;\} /*推荐*/  
div \{ display:inline-block; \_zoom:1;*display:inline;\} /*推荐:IE67\*/

**透明度继承**

方法一：做一个同级元素设透明度，和当前元素定位为position:absolute;  
子元素就不会继承父元素的透明度  
方法二：使用raba(0,0,0,0.8)  
由于ie8以下不支持rqba,可以使用滤镜来做的同样的效果：代码：  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\#4B7D0000,endColorstr=\#4B7D0000);  
DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是\#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算\#AA的的十进制x，x/255 = 3/10，解得x=3\*255/10，然后再把x换算成十六进制，约等于4B。  
换算关系：  
rgba 和IE下filter数值的转换  
rgba 透明值 IEfilter值  
0.1 19  
0.2 33  
0.3 4C  
0.4 66  
0.5 7F  
0.6 99  
0.7 B2  
0.8 C8  
0.9 E5

**竖排显示文字**

h1 { 
    width: 50px; 
    font-size: 50px; 
    word-wrap: break-word; 
    letter-spacing: 20px; 
    } 
    <h1>我爱北京天安门</h1>

**[inline-block元素间距去除掉方法介绍][inline-block]**

方法一：去除html空格  
方法二：margin负值  
方法三：无闭合标签如`<div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血</a> </div>`  
方法四：font-size设为0如：`.space { font-size: 0; } .space a { font-size: 12px; }`  
方法五：使用letter-spacing如:`.space { letter-spacing: -3px; } .space a { letter-spacing: 0; }`  
方法六：使用word-spacing 类似下面代码：`.space { word-spacing: -6px; } .space a { word-spacing: 0; }`  
其它方法：yui3中：

.yui3-g { 
    letter-spacing: -0.31em; /* webkit */ 
    *letter-spacing: normal; /* IE < 8 重置 */ 
    word-spacing: -0.43em; /* IE < 8 && gecko */ } 
    .yui3-u { display: inline-block; zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */ 
    letter-spacing: normal; 
    word-spacing: normal; 
    vertical-align: top; 
    }

RayM

li { display:inline-block; background: orange; padding:10px; word-spacing:0; } 
    ul { width:100%; display:table; /* 调教webkit*/ word-spacing:-1em; } 
    .nav li { *display:inline;}

**文本溢出**

<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>

**多行文本溢出**

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

多行文本溢出方案2 ,兼容

p {
        position:relative;
        line-height:1.4em;
        /* 3 times the line-height to show 3 lines */
        height:4.2em;
        overflow:hidden;
    }
    p::after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
        background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }

\*\*特殊css处理：  
chrome:记住密码的黄色背景\*\*

input: -webkit-autofill{
    -webkit-box-shadow: 0 0 0 400px #E8ECED inset;};

**背景图铺满整个背景的需求，这里分享下使用方法**  
需要的效果  
1. 图片以背景的形式铺满整个屏幕，不留空白区域  
2. 保持图像的纵横比（图片不变形）  
3. 图片居中  
4. 不出现滚动条  
5. 多浏览器支持  
以图片bg.jpg为例  
最简单，最高效的方法 CSS3.0  
归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和center定位背景图，然后用background-size来使图片铺满，具体css如下

html {
         background: url(bg.jpg) no-repeat center center fixed;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
      }

[inline-block]: http://www.jb51.net/css/57261.html