黑马程序员技术交流社区

标题: css工作中常用的效果总结 [打印本页]

作者: 月亮是我掰弯的 时间: 2016-10-18 16:01
标题: css工作中常用的效果总结
本帖最后由月亮是我掰弯的于 2016-10-14 15:20 编辑

1、给input的placeholder设置颜色

[HTML] 纯文本查看 复制代码

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

}

2、CSS :after 和：before选择器

[HTML] 纯文本查看 复制代码

[mw_shl_code=applescript,true].clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

写了这个clearfix，可以让外层div包裹整个内层，符合谷歌闭合机制。
3、透明度
opacity: .9;
filter:alpha(opacity=90)
IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter；

[HTML] 纯文本查看 复制代码

[mw_shl_code=applescript,true].haorooms{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}

4、超出长度显示省略号
单行文本显示...
一般要指定宽度，然后给如下四个属性。

[HTML] 纯文本查看 复制代码

[mw_shl_code=applescript,true]display:bolck;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

多行文本显示....
主要属性-webkit-line-clamp

[HTML] 纯文本查看 复制代码

[mw_shl_code=html,true]p {

    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器

5、阴影效果

[HTML] 纯文本查看 复制代码

[mw_shl_code=html,true]-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);

-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);

box-shadow: 0 1px 1px rgba(0,0,0,.2);

6、CSS强制换行和不换行
自动换行

[HTML] 纯文本查看 复制代码

div{ 

word-wrap: break-word; 

word-break: normal; 

}

强制英文单词断行

[HTML] 纯文本查看 复制代码

div{

word-break:break-all;

}

强制不换行

[HTML] 纯文本查看 复制代码

div{

white-space:nowrap;

}

7、CSS3的一些前缀总结
css3为了更好的兼容多个浏览器，通常前面加一大堆前缀

[HTML] 纯文本查看 复制代码

-webkit  /*为Chrome/Safari*/

-moz  /*为Firefox*/

-ms   /*为IE*/

-o  /*为Opera*/

[HTML] 纯文本查看 复制代码

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/

-moz-transform:rotate(-3deg); /*为Firefox*/

-ms-transform:rotate(-3deg); /*为IE*/

-o-transform:rotate(-3deg); /*为Opera*/

transform:rotate(-3deg); /*为nothing*/

[HTML] 纯文本查看 复制代码

-moz-border-radius: 12px; /* FF1-3.6 */

-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */

border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

8、css3的box-sizing
给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。用box-sizing：border-box,可以去除边框的占位。
浏览器支持IE9以上及火狐、谷歌、Opera等等。

[HTML] 纯文本查看 复制代码

<style> 

div.container

{

width:30em;

border:1em solid;

}

div.box

{

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

width:50%;

border:1em solid red;

float:left;

}

</style>

</head>

<body>

<div class="container">

<div class="box">这个 div 占据左半部分。</div>

<div class="box">这个 div 占据右半部分。</div>

</div>

9、模糊遮罩效率，模糊滤镜效果

[HTML] 纯文本查看 复制代码

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-o-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2