首頁技術(shù)文章正文

Web前端開發(fā)培訓(xùn)之css工作中常用的效果總結(jié)

更新時間:2017-05-31 來源:黑馬程序員web前端開發(fā)培訓(xùn)學(xué)院 瀏覽量:

1、給input的placeholder設(shè)置顏色
[HTML] 純文本查看 復(fù)制代碼
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] 純文本查看 復(fù)制代碼
1
[mw_shl_code=applescript,true].clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

寫了這個clearfix，可以讓外層div包裹整個內(nèi)層，符合谷歌閉合機(jī)制。
3、透明度
opacity: .9; 
filter:alpha(opacity=90)
IE7和IE6中opacity是沒有用的，在IE6中DIV透明的方法一般用filter；
[HTML] 純文本查看 復(fù)制代碼
1
[mw_shl_code=applescript,true].haorooms{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}


4、超出長度顯示省略號
單行文本顯示...
一般要指定寬度，然后給如下四個屬性。
[HTML] 純文本查看 復(fù)制代碼
1
2
3
4
[mw_shl_code=applescript,true]display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

多行文本顯示....
主要屬性-webkit-line-clamp
[HTML] 純文本查看 復(fù)制代碼
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內(nèi)核的）瀏覽器

5、陰影效果
[HTML] 純文本查看 復(fù)制代碼
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強(qiáng)制換行和不換行
自動換行
[HTML] 純文本查看 復(fù)制代碼
1
2
3
4
div{
word-wrap: break-word;
word-break: normal;
}

強(qiáng)制英文單詞斷行
[HTML] 純文本查看 復(fù)制代碼
1
2
3
div{
word-break:break-all;
}

強(qiáng)制不換行
[HTML] 純文本查看 復(fù)制代碼
1
2
3
div{
white-space:nowrap;
}


7、CSS3的一些前綴總結(jié)
css3為了更好的兼容多個瀏覽器，通常前面加一大堆前綴
[HTML] 純文本查看 復(fù)制代碼
1
2
3
4
-webkit  /*為Chrome/Safari*/
-moz  /*為Firefox*/
-ms   /*為IE*/
-o  /*為Opera*/

[HTML] 純文本查看 復(fù)制代碼
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] 純文本查看 復(fù)制代碼
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，邊框的寬度會在行內(nèi)顯示。用box-sizing：border-box,可以去除邊框的占位。
瀏覽器支持IE9以上及火狐、谷歌、Opera等等。
[HTML] 純文本查看 復(fù)制代碼
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 占據(jù)左半部分。</div>
<div class="box">這個 div 占據(jù)右半部分。</div>
</div>


9、模糊遮罩效率，模糊濾鏡效果
[HTML] 純文本查看 復(fù)制代碼
1
2
3
4
5
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);



本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：黑馬程序員web前端培訓(xùn)學(xué)院；
首發(fā)：http://web.itheima.com/ 
分享到：
在線咨詢 我要報名
和我們在線交談！