整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊右上方紅色按鈕關注“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軸在循環位移，隱藏掉就讓你看到了加載的動畫效果。
當你需要這樣一個上傳文件，按鈕時，你考慮的是找設計弄個圖片，還是自己寫一個？？？
其實CSS寫，也很簡單的。
<a href="javascript：;" class="upload" title="繼續上傳">添加圖片</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;
}
當我們想給一個矩形或其他能用 border-radius 生成的形狀加投影時，用 box-shadow 都可以解決，如下圖：
但是，當元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些 力不從心了，因為 border-radius 會無恥地忽視透明部分。這類情況包括下列幾種情況:
1、半透明圖像、背景圖像、或者 border-image(比如老式的金質像框);
2、元素設置了點狀、虛線或半透明的邊框，但沒有背景(或者當 background-clip 不是 border-box 時);
3、對話氣泡，它的小尾巴通常是用偽元素生成的;
4、幾乎所有的折角效果
5、通過 clip-path 生成的形狀。
下面來看看這個示例： html代碼
<div class="speech">不規則的投影</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給搞定了。這是為什么了？
可以很明顯的看出區別，為什么會這樣呢？在這里我用的是div標簽，大家都知道，div標簽是個塊標簽，說白了是個盒模型，指的是一塊區域，box-shadow的屬性只能添加到盒模型外面，因此內部的東西是不會添加上的，就變成上圖的樣子，中間還是白色部分。而drop-shadow就不一樣了，他是把所有的非透明區域都做了陰影效果，就相當于一種真正的投影。
經常在網頁中看到一些Dialog，例如有些網頁點擊登錄注冊時就會跳出一個彈框來顯示登錄注冊頁面，下面就使用 css 完成一個可以自適應，無論窗口的大小，始終能保持水平垂直居中的dialog。
<div class="c-pupup"> <div class="dialog"> <div class="content"> 我是內容 </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;
}
這些CSS都是非常實用的，有興趣的可以收藏起來，沒準以后能用上。然后drop-shadow就不用去糾結IE能不能用了，因為我們已經放棄它了。
喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！
在前端開發中經常會用到很多的簡易圖形，例如三角形，箭頭，圓形等。有很多人一開始會想著用小的圖片實現，不過這樣會增加頁面請求次數，延緩頁面加載效果。
在CSS中有個border屬性，它完全可以達到制作各種簡易圖形的效果，今天我們就一起來看看吧。
文章中的代碼都已經放在了github上，感興趣的同學自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html
CSS
在制作各種簡易圖形之前，我們先來看看border屬性的使用。
border是一個復合屬性。
border-width表示邊框寬度。
border-style表示邊框樣式，設置實線，虛線，點狀等。
border-color表示邊框顏色，還可以設置transparent，表示透明。
border又分為上下左右四個方向，每個方向都占據各自的空間，不會出現重疊的地方，尤其是在四個方向的邊框都設置的情況下，在四個角處也不會出現重疊。
我們來看個最簡單的例子，在四個方向上都設置邊框，賦予不同的顏色。
圖片1
通過上面的圖片1可以看出，四個角處是分離，沒有重合的。
首先我們來看看梯形的效果圖。
梯形效果圖
我們再來分析下梯形是如何實現的。
因為我們完全是通過border設置，所以這個div的高度應該為0。
梯形的左右兩個腰，恰好如同border在角的銜接處，然后將兩側的border-style設置為transparent。
因此我們可以得到以下的CSS代碼。
梯形的CSS代碼
修改border-left和border-right的寬度值，可以改變梯形的形狀。
三角形也分為上下左右四個方向，我們首先來看看總體的形狀。
三角形
然后我們也來分析下如何實現這個效果，以下三角形為例。
因為是呈現三角形的形狀，剛好契合border在角落的銜接處，因此高度和寬度都應該為0。
下三角形是上部有區域，所以要設置border-top。
border-left和border-right兩個方向都要設置寬度，然后設置為透明即可。
因此得到以下的CSS代碼，設置不同方向border的寬度，三角形的形狀也會跟著變。
下三角形CSS代碼
同理，只要掌握了其中一個方向的三角形原理，就會輕松寫出其他方向三角形的CSS代碼。
這里直接給出上三角形的CSS代碼。
上三角形CSS代碼
左三角形的CSS代碼如下所示。
左三角形CSS代碼
右三角形的CSS代碼如下所示。
右三角形CSS代碼
接下來我們看一種基本的只用border設計的形狀。
圖形
它的實現方式也很簡單，只需要將width和height設置為0，然后將border四個方向的寬度設置成一樣的即可。
得到的代碼如下所示。
CSS代碼
基于上述的實現，我們可以得到左下，左上，右上，右下四種三角形。
首先看看基本形狀。
直角三角形
看到圖形后，我們很容易發現，只要隱藏掉連接的兩個方向的border，顯示出另外兩個方向的border，就可以得到直角三角形。
這里我們只展示出左上三角形的CSS代碼。
左上直角三角形CSS代碼
其他方向的直角三角形代碼可類比得出，大家可以試一下。
首先我們看看六角星的形狀。
六角星
看到這個圖形，大家應該能想到可以由上下兩個三角形構成，只要將上下兩個三角形位置對應準確。
這里為了節省頁面元素的空間，我們可以采用偽元素去實現。
將頁面顯示元素設置為上三角形。
利用:after偽元素設置下三角形。
設置偽元素的position為absolute，調節right和top值。
通過上述分析，我們得到以下CSS代碼。
六角星CSS代碼
與border屬性搭配使用的還有一個很常用的屬性，那就是border-radius。
border-radius是專門設置圓角的，可以讓90度角變為圓角。
我們首先看看最基本的圓形的樣子。
圓形
其實我們只需要將border-radius屬性設置為寬或者高的一半以上即可。代碼如下所示。
圓形
我們來看看同心圓的樣子。
同心圓
同心圓只需要設置一個border邊框，給border設置一個特殊的背景色，給div設置成白色背景即可。
同心圓CSS代碼
我們來看看半圓的形狀。
半圓
半圓的效果是如何實現的呢？
首先元素自身高度設置為0，設定寬度值。
設定上部和右部的border。
設定左上角和右上角的border-radius值。
得到的代碼如下所示。
上半圓
同理，下半圓，左半圓和右半圓修改對應的值就可以獲得。
今天這篇文章主要通過border屬性，畫出了一系列簡易的圖形，這在實際中是很實用的，大家學會了嗎?
ss的標簽有很多，本篇文章為大家總結以下常用的一些標簽以及簡單說明這些標簽的作用。
文字顏色： color: #ffffff;
文字樣式： font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
字體大小：font-size:16px;
文字行高： line-height: 30px;
文字粗細： font-weight: bold;(粗體) lighter;(細體) normal;(正常)
文字修飾： text-decoration:line-through; (加刪除線)overline;(加頂線)underline;(加下劃線)none;(無修飾線)
對齊方式： text-align:right; (文字右對齊)left;(文字左對齊)center;(內部元素居中)justify;(文字分散對齊)
使用練習：我們隨機書寫一段文字，設置文字的顏色為紅色，字體樣式為斜體，字體大小為20px，行高為35px，字體加粗，加下劃線，并是文字居中對齊；那么我們的代碼就如下所示：
在網頁中的顯示效果就如下圖所示：
背景樣式：background:#f00; (紅色背景)background-image : url(/image/bg.gif); (背景圖片)background-repeat : repeat;(重復排列-網頁默認)background-repeat : no-repeat;(不重復排列)background-repeat : repeat-x; (在x軸重復排列)background-repeat : repeat-y; (在y軸重復排列)
邊框樣式：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(立體內凸框)ridge(立體浮雕框)inset(凹框)outset(凸框)
內邊距樣式：padding-top:10px; (上邊框留空白)padding-right:10px;(右邊框留空白)padding-bottom:10px; (下邊框留空白)padding-left:10px;(左邊框留空白)
也可以簡寫成padding:10px 10px 10px 10px;(分別對應上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)
外邊距樣式：margin-top:10px; (上邊界留空白)margin-right:10px;(右邊界留空白)margin-bottom:10px; (下邊界留空白)margin-left:10px;(左邊界留空白)
也可以簡寫成margin:10px 10px 10px 10px;(分別對應上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)
使用練習：我們隨機書寫一段文字，設置文字的背景為灰色，邊框為紅色 2px 實線框，內邊距為10px，外邊距為10px；那么我們的代碼就如下所示：
在網頁中的顯示效果就如下圖所示：
對于css的常用標簽今天就先介紹到這里，大家在平時可以自己多加練習練習，熟練一下各個標簽的作用。
每日金句：有時候死扛下去總是會有機會的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
