整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
確的背景風(fēng)格可以為整個(gè)網(wǎng)站確定基調(diào)。我們搜集了一批使用大幅圖像、明亮顏色或出眾圖案來作為背景的優(yōu)秀網(wǎng)站，希望從中探尋當(dāng)下網(wǎng)站的流行設(shè)計(jì)風(fēng)格。
詳細(xì)文章可以參考：http://isux.tencent.com/web-design-background-creative-style-and-design-trends.html
對(duì)于網(wǎng)頁背景的處理有多重方法，其中背景虛化，她讓人看起帶有一種魔幻的感覺。它只有在圖片本身品質(zhì)很好的情況下才會(huì)帶來好的效果，如果為了掩飾圖片質(zhì)量的低劣而去虛化，效果會(huì)適得其反。一般我們需要要很清楚為什么要把一張圖虛化。有時(shí)候非常明顯的模糊會(huì)有很好的效果（像 Humaan 網(wǎng)站中柔化的山峰），而有時(shí)候只需要輕微的虛化就足夠了（上方 We Make 網(wǎng)站）。
不知道虛化多少，我們不妨先欣賞幾個(gè)這樣的網(wǎng)站，下面列舉了11個(gè)網(wǎng)頁：
1.SONY
http://www.sony.com/
2.Color Sensational
http://www.zakochajsiewkolorze.pl/#/zakonczenieKonkursu/
3.Designed By Dave
http://www.designedbydave.ca/
4.HappyTablesb
http://www.happytables.com/
5.Découvrez uOttawa
http://decouvrezuottawa.ca/
6.NOE Interactive
http://noe-interactive.com/
7.turningArt
http://www.turningart.com/
8.Rivers & Robots
http://new.riversandrobots.com/
9.Humaan
http://www.humaan.com.au/
10.Givers
http://giversband.com/
11.Daniel Filler
http://danielfiller.com/
至于如何制作虛化的背景，網(wǎng)上有很多教程，也列舉一個(gè)吧：http://www.missyuan.net/school/ps_2013/photoshop_11834_2.html
切圖網(wǎng)（qietu.com）是一家專門從事web前端開發(fā)的公司，專注we前端開發(fā)，關(guān)注用戶體驗(yàn)，歡迎訂閱微信公眾號(hào)：qietuwang
于 CSS 陰影，之前已經(jīng)有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關(guān)于 box-shadow 的用法。
最近一個(gè)新的項(xiàng)目，CSS-Inspiration，挖掘了其他很多有關(guān) CSS 陰影的點(diǎn)子，是之前的文章沒有覆蓋到的新內(nèi)容，而且有一些很有意思，遂打算再起一篇。
本文的題目是 CSS 陰影技巧與細(xì)節(jié)。CSS 陰影，卻不一定是 box-shadow 與 filter:drop-shadow，為啥？因?yàn)槭褂闷渌麑傩砸部梢阅M陰影，而且是各種各樣的陰影。下面且聽我娓娓道來~
單側(cè)投影
先說單側(cè)投影，關(guān)于 box-shadow，大部分時(shí)候，我們使用它都是用來生成一個(gè)兩側(cè)的投影，或者一個(gè)四側(cè)的投影。如下：
OK，那如果要生成一個(gè)單側(cè)的投影呢？
我們來看看 box-shadow 的用法定義：
{ box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#}
以 box-shadow: 1px 2px 3px 4px #333 為例，4 個(gè)數(shù)值的含義分別是，x 方向偏移值、y 方向偏移值 、模糊半徑、擴(kuò)張半徑。
這里有一個(gè)小技巧，擴(kuò)張半徑可以為負(fù)值。
繼續(xù)，如果陰影的模糊半徑，與負(fù)的擴(kuò)張半徑一致，那么我們將看不到任何陰影，因?yàn)樯傻年幱皩⒈话谠瓉淼脑刂拢墙o它設(shè)定一個(gè)方向的偏移量。所以這個(gè)時(shí)候，我們給定一個(gè)方向的偏移值，即可實(shí)現(xiàn)單側(cè)投影：
CodePen Demo — css單側(cè)投影（https://codepen.io/Chokcoco/pen/pergRb）
投影背景 / 背景動(dòng)畫
接著上面的說。
很明顯，0=-0，所以當(dāng) box-shadow 的模糊半徑和擴(kuò)張半徑都為 0 的時(shí)候，我們也可以得到一個(gè)和元素大小一樣的陰影，只不過被元素本身遮擋住了，我們嘗試將其偏移出來。
CSS代碼如下：
div { width: 80px; height: 80px; border: 1px solid #333; box-sizing: border-box; box-shadow: 80px 80px 0 0 #000;}
得到如下結(jié)果：
有什么用呢？好像沒什么意義啊。
額，確實(shí)好像沒什么用。不過我們注意到，box-shadow 是可以設(shè)置多層的，也就是多層陰影，而且可以進(jìn)行過渡變換動(dòng)畫（補(bǔ)間動(dòng)畫）。但是 background-image: linear-gradient()，也就是漸變背景是不能進(jìn)行補(bǔ)間動(dòng)畫的。
這又扯到哪里去了。好我們回來，利用上面的特性，我們可以利用 box-shadow 實(shí)現(xiàn)原本只能利用漸變才能實(shí)現(xiàn)的背景圖：
用 box-shadow，實(shí)現(xiàn)它的 CSS 代碼如下（可以更簡(jiǎn)化）：
.shadow { position: relative; width: 250px; height: 250px;}.shadow::before { content: ""; position: absolute; width: 50px; height: 50px; top: -50px; left: -50px; box-shadow: 50px 50px #000, 150px 50px #000, 250px 50px #000, 50px 100px #000, 150px 100px #000, 250px 100px #000, 50px 150px #000, 150px 150px #000, 250px 150px #000, 50px 200px #000, 150px 200px #000, 250px 200px #000, 50px 250px #000, 150px 250px #000, 250px 250px #000;}
用漸變來實(shí)現(xiàn)的話，只需要這樣：
.gradient { width: 250px; height: 250px; background-image: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%); background-size: 100px 100px;}
為什么選擇更為復(fù)雜的 box-shadow 呢？因?yàn)樗梢赃M(jìn)行補(bǔ)間動(dòng)畫，像這樣，這是使用漸變做不到的：
CodePen Demo — box-shadow實(shí)現(xiàn)背景動(dòng)畫（https://codepen.io/Chokcoco/pen/WaBYZL）
當(dāng)然，這只是個(gè)示例 Demo，運(yùn)用點(diǎn)想象力還有很多有意思的效果，再貼一個(gè)：
CodePen Demo — CSS Checker Illusion( By David Khourshid )（https://codepen.io/davidkpiano/pen/LVzxPV）
嗯，很有意思，就是實(shí)際用途可能不大。
立體投影
好，我們繼續(xù)。下一個(gè)主題是立體投影。
這個(gè)說法很奇怪，陰影的出現(xiàn)，本就是為了讓原本的元素看起來更加的立體，那這里所謂的立體投影，是個(gè)怎么立體法？
這里所謂的立體投影，并不一定是使用了 box-shadow、text-shadow 或者 drop-shadow，而是我們使用其他元素或者屬性模擬元素的陰影。而這樣做的目的，是為了能夠突破 box-shadow 這類元素的一些定位局限。讓陰影的位置、大小、模糊度可以更加的靈活。
OK，讓我們來看看，這樣一個(gè)元素，我們希望通過自定義陰影的位置，讓它更加立體：
上圖 div 只是帶了一個(gè)非常淺的 bos-shadow ，看上去和立體沒什么關(guān)系，接下來，我們通過 div 的偽元素，給它生成一個(gè)和原圖邊角形狀類似的圖形，再通過 transform 位移一下，可能是這樣
OK，最后對(duì)這個(gè)用偽元素生成的元素進(jìn)行一些虛化效果（filter或者box-shadow都可以），就可以實(shí)現(xiàn)一個(gè)邊角看起來像被撕開的立體效果：
代碼非常簡(jiǎn)單，偽 CSS 代碼示意如下：
div { position: relative; width: 600px; height: 100px; background: hsl(48, 100%, 50%); border-radius: 20px;}div::before { content: ""; position: absolute; top: 50%; left: 5%; right: 5%; bottom: 0; border-radius: 10px; background: hsl(48, 100%, 20%); transform: translate(0, -15%) rotate(-4deg); transform-origin: center center; box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);}
所以總結(jié)一下：
還有其他很多場(chǎng)景：
CodePen Demo — 立體投影（https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100）
文字立體投影 / 文字長(zhǎng)陰影
上面的立體效果在文字上就完全不適用了，所以對(duì)待文字的立體陰影效果，還需要另辟蹊徑。
正常而言，我們使用 text-shadow 來生成文字陰影，像這樣：
<div> Txt Shadow</div>-----div { text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1);}
嗯，挺好的，就是不夠立體。那么要做到立體文字陰影，最常見的方法就是使用多層文字陰影疊加。
Tips：和 box-shadow 一樣，text-shadow 是可以疊加多層的！但是對(duì)于單個(gè)元素而言， drop-shadow的話就只能是一層。
好，上面的文字，我們?cè)囍B加個(gè) 50 層文字陰影試一下。額，50 層手寫，其實(shí)很快的~
好吧，手寫真的太慢了，還容易出錯(cuò)，所以這里我們需要借助一下 SASS/LESS 幫忙，寫一個(gè)生成 50 層陰影的 function 就好，我們每向右和向下偏移 1px，生成一層 text-shadow：
@function makeLongShadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;} div { text-shadow: makeLongShadow(hsl(14, 100%, 30%));}
上面的 SCSS 代碼。經(jīng)過編譯后，就會(huì)生成如下 CSS：
div { text-shadow: 0px 0px #992400, 1px 1px #992400, 2px 2px #992400, 3px 3px #992400, 4px 4px#992400, 5px 5px #992400, 6px 6px #992400, 7px 7px #992400, 8px 8px #992400, 9px 9px #992400, 10px10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px50px #992400;}
看看效果：
額，很不錯(cuò)，很立體。但是，就是丑，而且說不上來的奇怪。
問題出在哪里呢，陰影其實(shí)是存在明暗度和透明度的變化的，所以，對(duì)于漸進(jìn)的每一層文字陰影，明暗度和透明度應(yīng)該都是不斷變化的。這個(gè)需求，SASS 可以很好的實(shí)現(xiàn)，下面是兩個(gè) SASS 顏色函數(shù)：
關(guān)于 SASS 顏色函數(shù)，可以看看這里：Sass基礎(chǔ)—顏色函數(shù)
我們使用上面兩個(gè) SASS 顏色函數(shù)修改一下我們的 CSS 代碼，主要是修改上面的 makeLongShadow function 函數(shù)：
@function makelongrightshadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $color: fade-out(desaturate($color, 1%), .02); $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;}
好，看看最終效果：
嗯，大功告成，這次順眼了很多~
CodePen Demo — 立體文字陰影（https://codepen.io/Chokcoco/pen/JmgNNa）
當(dāng)然，使用 CSS 生成立體文字陰影的方法還有很多，下面再貼出一例，使用了透明色疊加底色的多重線性漸變實(shí)現(xiàn)的文字立體陰影，感興趣的同學(xué)可以去看看具體實(shí)現(xiàn)：
線性漸變配合陰影實(shí)現(xiàn)條紋立體陰影條紋字（https://codepen.io/Chokcoco/pen/XxQJEB?editors=1100）
長(zhǎng)投影
上面提到了通過多層陰影疊加實(shí)現(xiàn)文字的立體陰影。運(yùn)用在 div 這些容器上也是可以的。當(dāng)然這里還有一種挺有意思的方法。假設(shè)我們，有一個(gè)矩形元素，希望給他添加一個(gè)長(zhǎng)投影，像下面這樣：
要生成這種長(zhǎng)投影，剛剛說的疊加多層陰影可以，再就是借助元素的兩個(gè)偽元素，其實(shí)上面的圖是這樣的：
關(guān)鍵點(diǎn)在于，我們通過對(duì)兩個(gè)偽元素的 transform: skew() 變換以及從實(shí)色到透明色的背景色變化，實(shí)現(xiàn)了長(zhǎng)投影的效果：
CodePen Demo — 線性漸變模擬長(zhǎng)陰影（https://codepen.io/Chokcoco/pen/qJvVGy）
彩色投影
通常而言，我們生成陰影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它們生成的陰影通常只能是單色或者同色系的。
你這么說，難道還可以生成漸變色的陰影不成？
額，當(dāng)然不行。
這個(gè)真不行，但是通過巧妙的利用 filter: blur 模糊濾鏡，我們可以假裝生成漸變色或者說是顏色豐富的陰影效果。
當(dāng)然，關(guān)于 CSS 陰影還有很多有意思的技巧和細(xì)節(jié)，本文限于篇幅不再一一羅列。
CSS 是什么？
CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表。
屬性和屬性值用冒號(hào)隔開，以分號(hào)結(jié)尾。
CSS 四種引入方式：
1.行內(nèi)式
行內(nèi)式是在標(biāo)簽的style屬性中設(shè)定CSS樣式。
<div style="..."></div>2.嵌入式
嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head>標(biāo)簽的<style></style>標(biāo)簽對(duì)中。
<head>
...
<style type="text/css">
...此處寫CSS樣式
</style>
</head>3.導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用@import 引入外部CSS文件，<style>標(biāo)記也是寫在<head>標(biāo)記中。
導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此處注意.css文件的路徑
</style>
</head>4.鏈接式
將一個(gè)獨(dú)立的.css文件引入到HTML文件中，使用<link>標(biāo)記寫在<head>標(biāo)記中。
鏈接式會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
樣式應(yīng)用順序：
.nick {
color: yellow !important;
}基本選擇器：
1.通用元素選擇器
* 表示應(yīng)用到所有的標(biāo)簽。
* {color: yellow}2.標(biāo)簽選擇器
匹配所有使用 div 標(biāo)簽的元素（可以匹配所有標(biāo)簽）
div {color: yellow}3.類選擇器
匹配所有class屬性中包含info的元素。
語法：.類名{樣式}（類名不能以數(shù)字開頭，類名要區(qū)分大小寫。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>4.ID選擇器
使用id屬性來調(diào)用樣式，在一個(gè)網(wǎng)頁中id的值都是唯一的（是W3C規(guī)范而不是規(guī)則，所以不會(huì)報(bào)錯(cuò)）。
語法：#ID名{樣式}（ID名不能以數(shù)字開頭）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>組合選擇器：
1.多元素選擇器
同時(shí)匹配h3,h4標(biāo)簽，之間用逗號(hào)分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素選擇器
匹配所有div標(biāo)簽里嵌套的P標(biāo)簽，之間用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>3.子元素選擇器
匹配所有div標(biāo)簽里嵌套的子P標(biāo)簽，之間用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>4.毗鄰元素選擇器
匹配所有緊隨div標(biāo)簽之后的同級(jí)標(biāo)簽P，之間用+分隔（只能匹配一個(gè)）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>屬性選擇器：
1.[title] & P[title]
設(shè)置所有具有title屬性的標(biāo)簽元素；
設(shè)置所有具有title屬性的P標(biāo)簽元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>2.[title=Nick]
設(shè)置所有title屬性等于“Nick”的標(biāo)簽元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>3.[title~=Nick]
設(shè)置所有title屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“Nick”的標(biāo)簽元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>4.[title|=Nick]
設(shè)置所有title屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以"Nick"開頭的標(biāo)簽元素。
例：lang屬性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
設(shè)置屬性值以指定值開頭的每個(gè)標(biāo)簽元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>6.[title$=Nick]
設(shè)置屬性值以指定值結(jié)尾的每個(gè)標(biāo)簽元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>7.[title*=Nick]
設(shè)置屬性值中包含指定值的每個(gè)元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>偽類選擇器：
1. link、hover、active、visited
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>2. before、after
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p> 1. 顏色屬性：
color
transparent
opacity
2. 字體屬性:
font-style: 用于規(guī)定斜體文本
font-weight: 設(shè)置文本的粗細(xì)
font-size: 設(shè)置字體的大小
font-family：字體名稱
font：簡(jiǎn)寫屬性
3. 文本屬性:
white-space: 設(shè)置元素中空白的處理方式
direction: 規(guī)定文本的方向
text-align: 文本的水平對(duì)齊方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直對(duì)齊方式
text-indent: 文本縮進(jìn)
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個(gè)單詞之間的空白
text-transform: 屬性控制文本的大小寫
text-overflow: 文本溢出樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
</body>
</html>text-decoration: 文本的裝飾
text-shadow：文本陰影
word-wrap：自動(dòng)換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 150px;
height: 160px;
background-color: #FFA500;
/*邊框陰影*/
box-shadow: 10px 10px 5px #888;
/*自動(dòng)換行*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<p>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</p>
<h1>索寧</h1>
</body>
</html> a {
text-decoration: none;
/*去除a標(biāo)簽下劃線*/
}4. 背景屬性
background-color: 背景顏色
background-image 設(shè)置圖像為背景
background-position 設(shè)置背景圖像的位置坐標(biāo)
background-repeat 設(shè)置背景圖像不重復(fù)平鋪
background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background 簡(jiǎn)寫
5. 列表屬性
list-style-type: 列表項(xiàng)標(biāo)志的類型
list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志
list-style-position：列表項(xiàng)標(biāo)志的位置
list-style：縮寫
1. 邊框
border-style：邊框樣式
border-color：邊框顏色
border-width：邊框?qū)挾?/strong>
border-radius：圓角
border: 簡(jiǎn)寫
box-shadow：邊框陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
</style>
</head>
<body>
<div>
點(diǎn)贊哦！dear.
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.radius1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20px;
}
.radius2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 35px;
}
.radius3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20px 35px 50px;
}
.radius4 {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
border-radius: 20px 35px 50px 60px;
}
</style>
</head>
<body>
<div>
<span class="radius1"></span>
<span class="radius2"></span>
<span class="radius3"></span>
<span class="radius4"></span>
</div>
</body>
</html>邊框?qū)崿F(xiàn)各種三角符號(hào)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
}
.triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-stree"></div>
<div class="triangle-four"></div>
<div class="triangle-five"></div>
<div class="triangle-six"></div>
<div class="triangle-seven"></div>
<div class="triangle-eight"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
.back-in {
position: absolute;
width: 1020px;
height: 45px;
left: -20px;
top: 50px;
background-color: #2F4F4F;
}
.back-img {
border: 20px solid transparent;
border-top: 10px solid dimgrey;
border-right: 0;
display: inline-block;
position: absolute;
top: 95px;
left: -20px;
}
.back-font {
line-height: 9px;
margin-left: 30px;
color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="back-in"><h3 class="back-font">妹子求關(guān)注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>2.★ 盒子模型
一個(gè)標(biāo)準(zhǔn)的盒子模型：
padding:用于控制內(nèi)容與邊框之間的距離;
margin: 用于控制元素與元素之間的距離;
一個(gè)參數(shù)，應(yīng)用于四邊。
兩個(gè)參數(shù)，第一個(gè)用于上、下，第二個(gè)用于左、右。
三個(gè)參數(shù)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因?yàn)閎ody本身也是一個(gè)盒子，外層還有html，
在默認(rèn)情況下，body距離html會(huì)有若干像素的margin，所以body中的盒子不會(huì)緊貼瀏覽器窗口的邊框了。
解決方法：
body {
margin: 0;
}3.★ display
4. visibility
5.★ float 浮動(dòng)
讓一行顯示兩個(gè)塊級(jí)標(biāo)簽，會(huì)脫離文檔流
clear 清除浮動(dòng)：
6. clip 剪裁圖像
rect 剪裁定位元素：
7. overflow 設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何顯示內(nèi)容
8.★ position 規(guī)定元素的定位類型
9. z-index 元素層疊順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
</body>
</html>10. outline 邊框輪廓
11. zoom 縮放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
</style>
</head>
<body>
<div class="zoom1">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>12. cursor 鼠標(biāo)的類型形狀
鼠標(biāo)放在以下單詞上，There will be a miracle：
url: 自定義光標(biāo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
body {
cursor: url("mouse.png"), auto;
/*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
}
</style>
</head>
<body>
<div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html> Auto: 默認(rèn)
Default: 默認(rèn)
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help
not-allowed
13. transform、transition 動(dòng)畫效果
transform 轉(zhuǎn)換，變形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;
/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Transition 平滑過渡
#property 指定屬性對(duì)應(yīng)類型
1、color： 通過紅、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值單獨(dú)處理），如：background-color，border-color，color，outline-color等CSS屬性；
2、length：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；
3、percentage：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；
4、integer 離散步驟（整個(gè)數(shù)字），在真實(shí)的數(shù)字空間，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生，如：outline-offset，z-index等屬性；
5、number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom，opacity，font-weight等屬性；
6、transform list。
7、rectangle：通過x、 y、 width和height（轉(zhuǎn)為數(shù)值）變換，如：crop；
8、visibility：離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility；
9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；
10、gradient：通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫，如：background-image；
11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；
12、space-separated list of above：如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無變化；
13、a shorthand property：如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫，則會(huì)像所有單個(gè)屬性變化一樣變化。#支持執(zhí)行transition效果的屬性
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer鼠標(biāo)放在以下圖片上，There will be a miracle：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
.img-see-2016-7-2 {
background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
background-size: 660px;
background-repeat: no-repeat;
height: 300px;
width: 600px;
transition-duration: 30s;
transition-timing-function: ease;
transition-property: background-size;
}
.img-see-2016-7-2:hover {
background-size: 2000px;
}
</style>
</head>
<body>
<div class="img-see-2016-7-2"></div>
</body>
</html>作者：suoning
原文鏈接：https://www.cnblogs.com/suoning/p/5625582.html
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
