擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

文字加載...動畫

html

正在加載中<dot>...</dot>

css

dot{ 
 display: inline-block; 
 height: 1em; 
 line-height: 1; 
 text-align: left; 
 vertical-align: -.25em; 
 overflow: hidden; 
} 
dot::before{ 
 display: block; 
 content: '...\\A..\\A.'; 
 white-space: pre-wrap; 
 animation: dot 2s infinite step-start both; 
} 
@keyframes dot{ 
 33% { 
 transform: translateY(-2em); 
 } 
 66% { 
 transform: translateY(-1em); 
 } 
}

如果你看上圖代碼沒有看懂，請看下圖，我注釋掉一行代碼，你就明白了。原來是dot元素，沿著Y軸在循環(huán)位移，隱藏掉就讓你看到了加載的動畫效果。

border 實現(xiàn)邊框

當(dāng)你需要這樣一個上傳文件，按鈕時，你考慮的是找設(shè)計弄個圖片，還是自己寫一個？？？

其實CSS寫，也很簡單的。

<a href="javascript：;" class="upload" title="繼續(xù)上傳">添加圖片</a>
.upload{ 
 position: relative; 
 display: inline-block; 
 width: 76px; 
 height: 76px; 
 color: #ccc; 
 border: 2px dashed; /*邊框虛線*/ 
 text-indent: -12em; /*使其文字看不到*/ 
 transition: color .25s; /*hover事件：顏色漸變動畫*/ 
 overflow: hidden; 
 margin: 50px 100px; 
} 
/*用before/after偽類做 + 號樣式*/ 
.upload:before, .upload:after{ 
 content: ''; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
} 
.upload:hover{ 
 color: #34538b; 
} 
.upload::before{ 
 width: 20px; 
 border-top: 4px solid; 
 margin: -2px 0 0 -10px; 
} 
.upload::after{ 
 height: 20px; 
 border-left: 4px solid; 
 margin: -10px 0 0 -2px; 
}

不規(guī)則的投影 filter

當(dāng)我們想給一個矩形或其他能用 border-radius 生成的形狀加投影時，用 box-shadow 都可以解決，如下圖：

但是，當(dāng)元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些 力不從心了，因為 border-radius 會無恥地忽視透明部分。這類情況包括下列幾種情況:

1、半透明圖像、背景圖像、或者 border-image(比如老式的金質(zhì)像框);

2、元素設(shè)置了點狀、虛線或半透明的邊框，但沒有背景(或者當(dāng) background-clip 不是 border-box 時);

3、對話氣泡，它的小尾巴通常是用偽元素生成的;

4、幾乎所有的折角效果

5、通過 clip-path 生成的形狀。

下面來看看這個示例： html代碼

<div class="speech">不規(guī)則的投影</div>

css樣式

div { 
 position: relative; 
 display: inline-flex; 
 flex-direction: column; 
 justify-content: center; 
 vertical-align: bottom; 
 box-sizing: border-box; 
 width: 8em; 
 padding: .5em; 
 height: 5em; 
 margin: .6em; 
 background: #0cc071; 
 color: #fff; 
 /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此時是偽類是沒有陰影的*/ 
 -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
 filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
} 
 
.speech { 
 border-radius: .3em; 
} 
.speech::before { 
 content: ''; 
 position: absolute; 
 top: 1em; 
 right: -.7em; 
 width: 0; 
 height: 0; 
 border: 1em solid transparent; 
 border-left-color: #0cc071; 
 border-right-width: 0; 
}

從上圖可以看出box-shadow搞不定的，drop-shadow給搞定了。這是為什么了？

可以很明顯的看出區(qū)別，為什么會這樣呢？在這里我用的是div標(biāo)簽，大家都知道，div標(biāo)簽是個塊標(biāo)簽，說白了是個盒模型，指的是一塊區(qū)域，box-shadow的屬性只能添加到盒模型外面，因此內(nèi)部的東西是不會添加上的，就變成上圖的樣子，中間還是白色部分。而drop-shadow就不一樣了，他是把所有的非透明區(qū)域都做了陰影效果，就相當(dāng)于一種真正的投影。

css 實現(xiàn)自適應(yīng)的彈框

經(jīng)常在網(wǎng)頁中看到一些Dialog，例如有些網(wǎng)頁點擊登錄注冊時就會跳出一個彈框來顯示登錄注冊頁面，下面就使用 css 完成一個可以自適應(yīng)，無論窗口的大小，始終能保持水平垂直居中的dialog。

<div class="c-pupup"> 
 <div class="dialog"> 
 <div class="content"> 
 我是內(nèi)容 
 </div> 
 </div> 
</div>

css樣式

.c-pupup{ 
 position: fixed; 
 top:0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: rgba(0,0,0,.5); 
 text-align: center; 
 white-space: nowrap; 
 z-index: 99; 
} 
.c-pupup:after{ 
 content: ''; 
 display: inline-block; 
 height: 100%; 
 vertical-align: middle; 
} 
.dialog{ 
 background-color: #fff; 
 display: inline-block; 
 vertical-align: middle; 
 border-radius: 6px; 
 text-align: left; 
 white-space: normal; 
 width: 400px; 
 height: 250px; 
}

總結(jié)

這些CSS都是非常實用的，有興趣的可以收藏起來，沒準(zhǔn)以后能用上。然后drop-shadow就不用去糾結(jié)IE能不能用了，因為我們已經(jīng)放棄它了。

喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關(guān)注哦！

言

在前端開發(fā)中經(jīng)常會用到很多的簡易圖形，例如三角形，箭頭，圓形等。有很多人一開始會想著用小的圖片實現(xiàn)，不過這樣會增加頁面請求次數(shù)，延緩頁面加載效果。

在CSS中有個border屬性，它完全可以達到制作各種簡易圖形的效果，今天我們就一起來看看吧。

文章中的代碼都已經(jīng)放在了github上，感興趣的同學(xué)自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

CSS

border講解

在制作各種簡易圖形之前，我們先來看看border屬性的使用。

border是一個復(fù)合屬性。

• border-width表示邊框?qū)挾取?/p>

• border-style表示邊框樣式，設(shè)置實線，虛線，點狀等。

• border-color表示邊框顏色，還可以設(shè)置transparent，表示透明。

border又分為上下左右四個方向，每個方向都占據(jù)各自的空間，不會出現(xiàn)重疊的地方，尤其是在四個方向的邊框都設(shè)置的情況下，在四個角處也不會出現(xiàn)重疊。

我們來看個最簡單的例子，在四個方向上都設(shè)置邊框，賦予不同的顏色。

圖片1

通過上面的圖片1可以看出，四個角處是分離，沒有重合的。

梯形

首先我們來看看梯形的效果圖。

梯形效果圖

我們再來分析下梯形是如何實現(xiàn)的。

• 因為我們完全是通過border設(shè)置，所以這個div的高度應(yīng)該為0。

• 梯形的左右兩個腰，恰好如同border在角的銜接處，然后將兩側(cè)的border-style設(shè)置為transparent。

因此我們可以得到以下的CSS代碼。

梯形的CSS代碼

修改border-left和border-right的寬度值，可以改變梯形的形狀。

三角形

三角形也分為上下左右四個方向，我們首先來看看總體的形狀。

三角形

然后我們也來分析下如何實現(xiàn)這個效果，以下三角形為例。

• 因為是呈現(xiàn)三角形的形狀，剛好契合border在角落的銜接處，因此高度和寬度都應(yīng)該為0。

• 下三角形是上部有區(qū)域，所以要設(shè)置border-top。

• border-left和border-right兩個方向都要設(shè)置寬度，然后設(shè)置為透明即可。

因此得到以下的CSS代碼，設(shè)置不同方向border的寬度，三角形的形狀也會跟著變。

下三角形CSS代碼

同理，只要掌握了其中一個方向的三角形原理，就會輕松寫出其他方向三角形的CSS代碼。

這里直接給出上三角形的CSS代碼。

上三角形CSS代碼

左三角形的CSS代碼如下所示。

左三角形CSS代碼

右三角形的CSS代碼如下所示。

右三角形CSS代碼

正方形-四種顏色

接下來我們看一種基本的只用border設(shè)計的形狀。

圖形

它的實現(xiàn)方式也很簡單，只需要將width和height設(shè)置為0，然后將border四個方向的寬度設(shè)置成一樣的即可。

得到的代碼如下所示。

CSS代碼

直角三角形

基于上述的實現(xiàn)，我們可以得到左下，左上，右上，右下四種三角形。

首先看看基本形狀。

直角三角形

看到圖形后，我們很容易發(fā)現(xiàn)，只要隱藏掉連接的兩個方向的border，顯示出另外兩個方向的border，就可以得到直角三角形。

這里我們只展示出左上三角形的CSS代碼。

左上直角三角形CSS代碼

其他方向的直角三角形代碼可類比得出，大家可以試一下。

六角星

首先我們看看六角星的形狀。

六角星

看到這個圖形，大家應(yīng)該能想到可以由上下兩個三角形構(gòu)成，只要將上下兩個三角形位置對應(yīng)準(zhǔn)確。

這里為了節(jié)省頁面元素的空間，我們可以采用偽元素去實現(xiàn)。

• 將頁面顯示元素設(shè)置為上三角形。

• 利用:after偽元素設(shè)置下三角形。

• 設(shè)置偽元素的position為absolute，調(diào)節(jié)right和top值。

通過上述分析，我們得到以下CSS代碼。

六角星CSS代碼

圓形

與border屬性搭配使用的還有一個很常用的屬性，那就是border-radius。

border-radius是專門設(shè)置圓角的，可以讓90度角變?yōu)閳A角。

我們首先看看最基本的圓形的樣子。

圓形

其實我們只需要將border-radius屬性設(shè)置為寬或者高的一半以上即可。代碼如下所示。

圓形

同心圓

我們來看看同心圓的樣子。

同心圓

同心圓只需要設(shè)置一個border邊框，給border設(shè)置一個特殊的背景色，給div設(shè)置成白色背景即可。

同心圓CSS代碼

半圓

我們來看看半圓的形狀。

半圓

半圓的效果是如何實現(xiàn)的呢？

• 首先元素自身高度設(shè)置為0，設(shè)定寬度值。

• 設(shè)定上部和右部的border。

• 設(shè)定左上角和右上角的border-radius值。

得到的代碼如下所示。

上半圓

同理，下半圓，左半圓和右半圓修改對應(yīng)的值就可以獲得。

結(jié)束語

今天這篇文章主要通過border屬性，畫出了一系列簡易的圖形，這在實際中是很實用的，大家學(xué)會了嗎?

ss的標(biāo)簽有很多，本篇文章為大家總結(jié)以下常用的一些標(biāo)簽以及簡單說明這些標(biāo)簽的作用。

（1） css的文字屬性標(biāo)簽

文字顏色： color: #ffffff;

文字樣式： font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

字體大小：font-size:16px;

文字行高： line-height: 30px;

文字粗細(xì)： font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)

文字修飾： text-decoration:line-through; (加刪除線)overline;(加頂線)underline;(加下劃線)none;(無修飾線)

對齊方式： text-align:right; (文字右對齊)left;(文字左對齊)center;(內(nèi)部元素居中)justify;(文字分散對齊)

使用練習(xí)：我們隨機書寫一段文字，設(shè)置文字的顏色為紅色，字體樣式為斜體，字體大小為20px，行高為35px，字體加粗，加下劃線，并是文字居中對齊；那么我們的代碼就如下所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

（2）css背景樣式

背景樣式：background:#f00; (紅色背景)background-image : url(/image/bg.gif); (背景圖片)background-repeat : repeat;(重復(fù)排列-網(wǎng)頁默認(rèn))background-repeat : no-repeat;(不重復(fù)排列)background-repeat : repeat-x; (在x軸重復(fù)排列)background-repeat : repeat-y; (在y軸重復(fù)排列)

（3）css邊框樣式

邊框樣式：border-top : 1px solid #f00; (上框線)border-bottom : 1px solid #f00; (下框線)border-left : 1px solid #f00; (左框線)border-right : 1px solid #f00; (右框線)border:1px solid #f00;(上下左右邊框)

其他框線樣式：solid(實線框)dotted(虛線框)double(雙線框)groove(立體內(nèi)凸框)ridge(立體浮雕框)inset(凹框)outset(凸框)

（4）css內(nèi)邊距以及外邊距屬性

內(nèi)邊距樣式：padding-top:10px; (上邊框留空白)padding-right:10px;(右邊框留空白)padding-bottom:10px; (下邊框留空白)padding-left:10px;(左邊框留空白)

也可以簡寫成padding:10px 10px 10px 10px;(分別對應(yīng)上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)

外邊距樣式：margin-top:10px; (上邊界留空白)margin-right:10px;(右邊界留空白)margin-bottom:10px; (下邊界留空白)margin-left:10px;(左邊界留空白)

也可以簡寫成margin:10px 10px 10px 10px;(分別對應(yīng)上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)

使用練習(xí)：我們隨機書寫一段文字，設(shè)置文字的背景為灰色，邊框為紅色 2px 實線框，內(nèi)邊距為10px，外邊距為10px；那么我們的代碼就如下所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

對于css的常用標(biāo)簽今天就先介紹到這里，大家在平時可以自己多加練習(xí)練習(xí)，熟練一下各個標(biāo)簽的作用。

每日金句：有時候死扛下去總是會有機會的。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。