全国咨询/投诉热线:400-618-4000

Web前端开发培训之css工作中常用的效果总结

更新时间:2016年11月23日14时38分 来源:传智播客web前端开发培训学院 浏览次数:

1、给input的placeholder设置颜色
[HTML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
::-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] 纯文本查看 复制代码
1
[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] 纯文本查看 复制代码
1
[mw_shl_code=applescript,true].haorooms{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}


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

[HTML] 纯文本查看 复制代码
1
2
3
4
[mw_shl_code=applescript,true]display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

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

[HTML] 纯文本查看 复制代码
1
2
3
4
5
6
7
[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] 纯文本查看 复制代码
1
2
3
[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] 纯文本查看 复制代码
1
2
3
4
div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行
[HTML] 纯文本查看 复制代码
1
2
3
div{
word-break:break-all;
}

强制不换行
[HTML] 纯文本查看 复制代码
1
2
3
div{
white-space:nowrap;
}


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

[HTML] 纯文本查看 复制代码
1
2
3
4
-webkit  /*为Chrome/Safari*/
-moz  /*为Firefox*/
-ms   /*为IE*/
-o  /*为Opera*/

[HTML] 纯文本查看 复制代码
1
2
3
4
5
-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] 纯文本查看 复制代码
1
2
3
-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] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<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] 纯文本查看 复制代码
1
2
3
4
5
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);



本文版权归传智播客web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:传智播客web前端培训学院;
首发:http://www.itcast.cn/web/ 

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额