css
盒模型
回答問題的時(shí)候要整理思路，也就是你的思考方式是怎么樣的？
盒模型有兩種，W3C 和IE 盒子模型
1、W3C定義的盒模型包括margin、border、padding、content，元素的寬度width=content的寬度
2、IE盒模型與W3C盒模型的唯一區(qū)別就是元素的寬度，元素的width=border + padding + content
2） 對盒模型的理解
IE定義的盒模型較為合理，所以在css3中新增了box-sizing，包含兩個(gè)屬性content-box和border-box。
（1）content-box 元素的width = content
（2）border-box 元素的width = border + padding + content
3）更多理解
對于行內(nèi)元素 margin-top/margin-bottom對于上下元素?zé)o效，margin-left/margin-right有效
對于相鄰的塊級元素margin-top和margin-bottom兩者疊加按照一定的規(guī)則
（1） 都是整數(shù) margin值取兩者的最大值
（2） 都是負(fù)數(shù) margin值取最小值
（3）兩者正負(fù)相反，margin值取兩者之和
css單位
px
它是圖像顯示的基本單元，既不是一個(gè)確定的物理量，也不是一個(gè)點(diǎn)或者小方塊，而是一個(gè)抽象概念。很多時(shí)候，px也常被稱為 CSS 像素。
rem
我們將從你已經(jīng)熟悉的東西開始。em單位被定義為當(dāng)前字體大小。例如，如果你在body元素上設(shè)置一個(gè)字體大小，那么在body元素內(nèi)的任何子元素的em值都等于這個(gè)字體大小。
<body>
<div class="test">Test</div>
</body>
body { font-size: 14px; }
div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
在這里，我們說這個(gè)div將有一個(gè)1.2em的font-size。它是所繼承的字體大小的1.2倍，在這個(gè)例子中為14px。結(jié)果為16.8px.
但是，當(dāng)你在每個(gè)元素內(nèi)都級聯(lián)em定義的字體大小將會發(fā)生什么？在下面的代碼片段中我們應(yīng)用和上面一模一樣的CSS.每個(gè)div從它們的父節(jié)點(diǎn)繼承字體大小，帶給我們逐漸增加的字體大小。
<body>
<div> Test <!-- 14 * 1.2 = 16.8px -->
<div> Test <!-- 16.8 * 1.2 = 20.16px -->
<div> Test <!-- 20.16 * 1.2 = 24.192px--></div>
</div>
</div>
</body>
em
在CSS 中，如果沒有任何 CSS 規(guī)則影響的前提之下，通常情況下：
1em的長度是：1em = 16px = 0.17in = 12pt = 1pc = 4.mm = 0.42cm
<body style=“font-size:1.5em”>
<h3 style=“font-size:1.5em”>em單位<h3>
<body>
vh和vw
vh等于viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px。
.slide {
height: 100vh;
}
vmin 和 vmax
vh和vm總是與視口的高度和寬度有關(guān)，與之不同的，vmin和vmax是與這次寬度和高度的最大值或最小值有關(guān)，取決于哪個(gè)更大和更小。例如，如果瀏覽器設(shè)置為1100px寬、700px高，1vmin會是7px,1vmax為11px。然而，如果寬度設(shè)置為800px，高度設(shè)置為1080px，1vmin將會等于8px而1vmax將會是10.8px。
設(shè)想你需要一個(gè)總是在屏幕上可見的元素。使用高度和寬度設(shè)置為低于100的vmin值將可以實(shí)現(xiàn)這個(gè)效果。例如，一個(gè)正方形的元素總是至少接觸屏幕的兩條邊可能是這樣定義的：
.box {
height: 100vmin;
width: 100vmin;
}
如果你需要一個(gè)總是覆蓋可視窗口的正方形(一直接觸屏幕的四條邊),使用相同的規(guī)則只是把單位換成vmax。
.box {
height: 100vmax;
width: 100vmax;
}
ex 和 ch
ex和ch單位，與em和rem相似，依賴于當(dāng)前字體和字體大小。然而，與em和rem不同的是，這兩個(gè)單位只也依賴于font-family，因?yàn)樗鼈儽欢榛谔厥庾煮w的方案。
css選擇器
1、標(biāo)簽名選擇器：通過標(biāo)簽的名稱找到指定標(biāo)簽
格式：元素名{ }
2、類選擇器：通過標(biāo)簽的class屬性值選中指定標(biāo)簽,多個(gè)標(biāo)簽可以有相同的class值
格式：.d1{ }
3、id選擇器：通過id找到標(biāo)簽，一個(gè)html文件中id不能重復(fù)
格式： #id{}
4、派生選擇器（后代選擇器）：類似于路徑，找到符合要求的標(biāo)簽，會匹配所有的后代標(biāo)簽
格式： ul li a{} #id li a{}
5、子元素選擇器：和后代類似，但是只能獲得子元素
格式： ul>li>a{}
6、分組選擇器：可以將多種選擇器結(jié)合到一起使用，用來統(tǒng)一設(shè)定樣式
格式: h1,h2,#abc,.m{ }
7、偽元素選擇器：偽元素選擇器選擇的是元素的狀態(tài)，狀態(tài)分為以下幾種：
bfc 清除浮動(dòng)
BFC的原理（渲染規(guī)則）：
1.垂直方向發(fā)生重疊
2.BFC的區(qū)域不會與box重疊（因此可以用來清除浮動(dòng)）
3.BFC是一個(gè)獨(dú)立的容器，外面的元素不會影響里面的元素，反之，里面的元素也不會影響外面的元素
4.計(jì)算BFC的高度時(shí)，浮動(dòng)元素不參與計(jì)算
如何創(chuàng)建BFC
1.float的值不為null
2.position的值不為static或者relative
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow的值為hidden或者auto
清除浮動(dòng)的四種方式
1.overflow: hidden
找到浮動(dòng)元素的父元素，添加overflow: hidden，觸發(fā)BFC清除浮動(dòng)
缺點(diǎn)：內(nèi)容增多的時(shí)候容易造成不會自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示要溢出的元素
2.額外標(biāo)簽法
在最后一個(gè)浮動(dòng)標(biāo)簽后，新加一個(gè)標(biāo)簽，給其設(shè)置clear：both；
缺點(diǎn)：margin失效。兩個(gè)div之間，沒有任何的間隙
3.使用after偽元素清除浮動(dòng)
.clearfix:after{
content:"";//設(shè)置內(nèi)容為空
height:0;//高度為0
line-height:0;//行高為0
display:block;//將文本轉(zhuǎn)為塊級元素
visibility:hidden;//將元素隱藏
clear:both//清除浮動(dòng)
}
.clearfix{
zoom:1;為了兼容IE
}
4.使用before和after雙偽元素清除浮動(dòng)
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
層疊上下文
首先，z-index屬性值并不是在任何元素上都有效果。它僅在定位元素（定義了position屬性，且屬性值為非static值的元素）上有效果。
判斷元素在Z軸上的堆疊順序，不僅僅是直接比較兩個(gè)元素的z-index值的大小，這個(gè)堆疊順序?qū)嶋H由元素的層疊上下文、層疊等級共同決定。
如何產(chǎn)生“層疊上下文”
層疊上下文也基本上是有一些特定的CSS屬性創(chuàng)建的，一般有3種方法：
1、HTML中的根元素<html></html>本身j就具有層疊上下文，稱為“根層疊上下文”。
2、普通元素設(shè)置position屬性為非static值并設(shè)置z-index屬性為具體數(shù)值，產(chǎn)生層疊上下文。
3、CSS3中的新屬性也可以產(chǎn)生層疊上下文。
常見頁面布局
（1）流式布局 Fluid
流布局與固定寬度布局基本不同點(diǎn) 就在于對網(wǎng)站尺寸的側(cè)量單位不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，這位網(wǎng)頁提供了很強(qiáng)的可塑性和流動(dòng)性。換句話說，通過設(shè)置百分比，我們不需要考慮設(shè)備尺寸或者屏幕寬度大小了，可以為每種情形找到一種可行的方案，應(yīng)為你的設(shè)計(jì)尺寸將適應(yīng)所有的設(shè)備尺寸。流布局與媒體查詢和優(yōu)化樣式技術(shù)密切相關(guān)。
（2）固定布局 Fixed
在固定布局中，網(wǎng)頁的寬度是必須指定為一個(gè)像素值，一般為960px。過去，開發(fā)人員發(fā)現(xiàn)960px是最適合作為網(wǎng)格布局的寬度，因?yàn)?60可以整除3，4，5，6，8，10，12和15。在今天，在web開發(fā)中還是比較普遍使用固定寬度布局的，因?yàn)檫@種布局具有很強(qiáng)的穩(wěn)定性與可控性。但是同時(shí)也有一些劣勢，固定寬度必須考慮網(wǎng)站是否可以適用于不同的屏幕寬度。
（3）彈性布局 Elastic
彈性布局跟流布局很像，主要不同是大小單位。彈性布局的大小單位不是像素或者百分比，而是em或者rem，避免了根據(jù)px局部在高分辨率下幾乎無法辨識的缺點(diǎn)，又相對于%百分比更加靈活，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示，需要一段時(shí)間適應(yīng)而且不易從其他布局轉(zhuǎn)換過來。
（4）伸縮 Flex box
使用css3 Flex系列屬性進(jìn)行相對布局。對于富媒體和復(fù)雜排版的支持非常大，但是存在兼容性問題。
（5）響應(yīng)式
使用@media媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式。優(yōu)秀的響應(yīng)范圍設(shè)計(jì)可以給適配范圍內(nèi)的設(shè)備做好的體驗(yàn)。
響應(yīng)式布局
響應(yīng)式布局等于流動(dòng)網(wǎng)格布局，而自適應(yīng)布局等于使用固定分割點(diǎn)來進(jìn)行布局。
（1）設(shè)置 Meta 標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
（user-scalable = no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問題。 ）
(2)通過媒介查詢來設(shè)置樣式 Media Queries
Media Queries 是響應(yīng)式設(shè)計(jì)的核心。
它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個(gè)終端的分辨率小于980px，那么可以這樣寫：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
(3)設(shè)置多種試圖寬度
假如我們要設(shè)定兼容 iPad 和 iphone 的視圖，那么可以這樣設(shè)置：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
css預(yù)處理，后處理
Sass、LESS和Stylus的對比
Less：變量處理方式–懶加載，所有 Less 變量的計(jì)算，都是以這個(gè)變量最后一次被定義的值為準(zhǔn)。
Less
@size: 10px;
.box { width: @size; }
@size: 20px;
.ball { width: @size; }
輸出：
.box { width: 20px; }
.ball { width: 20px; }
Stylus
size = 10px
.box
width: size
size = 20px
.ball
width: size
輸出：
.box {
width: 10px;
}
.ball {
width: 20px;
}
css3新特性
- 圓角邊框
- 多背景圖
- 顏色和透明度(由原來的rgb到現(xiàn)在的rgba)
- 多列布局和彈性盒模型
- 盒子的變幻（2D、3D）
- 過渡和動(dòng)畫
- 引入web字體（在服務(wù)器端存儲）
- 媒體查詢
- 陰影
animation和transiton的相關(guān)屬性
transition：
過渡屬性 過渡所需要時(shí)間 過渡動(dòng)畫函數(shù) 過渡延遲時(shí)間；默認(rèn)值分別為：all 0 ease 0
1、局限性：
1）只能設(shè)置一個(gè)屬性
2）需要偽類/事件觸發(fā)才執(zhí)行
3）只能設(shè)置動(dòng)畫初始值和結(jié)束值
2、過渡函數(shù)：
liner ：勻速
ease-in：減速
ease-out：加速
ease-in-out：先加速再減速
cubic-bezier：三次貝塞爾曲線
3、以下情況下，屬性值改變不能產(chǎn)生過渡效果
1）background-image，如url(a.jpg)到url(b.jpg)（與瀏覽器支持相關(guān)，有的瀏覽器不支持）等，瀏覽器支持情況
2）float浮動(dòng)元素
3）height或width使用auto值=>解決：用js計(jì)算
4）display屬性在none和其他值（block、inline-block、inline）之間變換 =>解決：加上延時(shí) setTimeout(function(){ },0)
5）position在stativ和absolute之間變換
animation：
1）可以控制到每一幀
- 結(jié)合@ keyframes使用
配合動(dòng)畫：
1）寬高變化
高度從0到auto：
a、用max-height （缺陷：實(shí)際內(nèi)容不會達(dá)到該高度,卡頓）
b、transition+js
2）縮放scale（中心開始）
3）位置移動(dòng)
a、transform: translate（不適用position: absolute;transform: translate布局）
b、top/left/right/bottom與absolute
c、margin-top（left,right,bottom）
display哪些取值
block 此元素將顯示為塊級元素，此元素前后會帶有換行符。
none 此元素不會被顯示。
inline-block 行內(nèi)塊元素。
list-item 此元素會作為列表顯示。
table 此元素會作為塊級表格來顯示
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值
相鄰的兩個(gè)inline-block節(jié)點(diǎn)為什么會出現(xiàn)間隔，該如何解決
元素被當(dāng)成行內(nèi)元素排版的時(shí)候，原來HTML代碼中的回車換行被轉(zhuǎn)成一個(gè)空白符，在字體不為0的情況下，空白符占據(jù)一定寬度，所以inline-block的元素之間就出現(xiàn)了空隙。這些元素之間的間距會隨著字體的大小而變化，當(dāng)行內(nèi)元素font-size:16px時(shí)，間距為8px。
方法1: font-size
方法2：改變書寫方式
方法3：使用margin負(fù)值
方法4：使用word-spacing或letter-spacing
meta viewport 移動(dòng)端適配
meta viewport 的6個(gè)屬性:
width ： 設(shè)置viewport 的寬度
height： 設(shè)置viewport 的高度
initial-scale ： 設(shè)置頁面的初始縮放值
minimum-scale ：允許用戶的最小縮放值
maximum-scale：允許用戶的最大縮放值
user-scalable： 是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
3個(gè)viewport:
（1）layout viewport
如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話，某些網(wǎng)站會因?yàn)関iewport太窄而顯示錯(cuò)亂，所以這些瀏覽器就默認(rèn)會把viewport設(shè)為一個(gè)較寬的值，比如980px，使得即使是那些為PC瀏覽器設(shè)計(jì)的網(wǎng)站也能在移動(dòng)設(shè)備瀏覽器上正常顯示。這個(gè)瀏覽器默認(rèn)的viewport叫做 layout viewport。layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。
（2）visual viewport
layout viewport的寬度是大于瀏覽器可視區(qū)域的寬度的，所以還需要一個(gè)viewport來代表瀏覽器可視區(qū)域的大小，這個(gè)viewport叫做 visual viewport。visual viewport的寬度可以通過 document.documentElement.innerWidth來獲取。
（3）ideal viewport
ideal viewport是一個(gè)能完美適配移動(dòng)設(shè)備的viewport。首先，不需要縮放和橫向滾動(dòng)條就能正常查看網(wǎng)站的所有內(nèi)容；其次，顯示的文字、圖片大小合適，如14px的文字不會因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無法看清，無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都差不多。這個(gè)viewport叫做 ideal viewport。
ideal viewport并沒有一個(gè)固定的尺寸，不同的設(shè)備有不同的ideal viewport。例如，所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640。
ideal viewport 的意義在于，無論在何種分辨率的屏幕下，針對ideal viewport 而設(shè)計(jì)的網(wǎng)站，不需要縮放和橫向滾動(dòng)條都可以完美地呈現(xiàn)給用戶。
CSS實(shí)現(xiàn)寬度自適應(yīng)100%，寬高16:9的比例的矩形
第一步先計(jì)算高度，假設(shè)寬100%，那么高為h=9/16=56.25%
第二步利用之前所說設(shè)置padding-bottom方法實(shí)現(xiàn)矩形
<div class="box">
<div class="scale">
<p>這是一個(gè)16：9的矩形</p>
</div>
</div>
.box {
width: 80%;
}
.scale {
width: 100%;
padding-bottom: 56.25%;
height: 0;
position: relative;
}
.item {
width: 100%;
height: 100%;
background-color: aquamarine;
position: absolute;
}
畫三角形
2.1 Triangle Up
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
2.2 Triangle Down
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
2.3 Triangle Left
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
2.4 Triangle Right
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
2.5 Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
2.6 Triangle Top Right
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
2.7 Triangle Bottom Left
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
2.8 Triangle Bottom Right
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
2.1 Triangle Up
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
2.2 Triangle Down
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
2.3 Triangle Left
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
2.4 Triangle Right
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
2.5 Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
2.6 Triangle Top Right
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
2.7 Triangle Bottom Left
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
2.8 Triangle Bottom Right
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
1像素邊框問題
- 媒體查詢利用設(shè)備像素比縮放，設(shè)置小數(shù)像素
? IOS8下已經(jīng)支持帶小數(shù)的px值, media query對應(yīng)devicePixelRatio有個(gè)查詢值-webkit-min-device-pixel-ratio, css可以寫成這樣
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
【缺點(diǎn)】對設(shè)備有要求，小數(shù)像素目前兼容性較差。
- viewport + rem 方案
該方案是對上述方案的優(yōu)化，整體思路就是利用viewport + rem + js 動(dòng)態(tài)的修改頁面的縮放比例，實(shí)現(xiàn)小于1像素的顯示。在頁面初始化時(shí)，在頭部引入原始默認(rèn)狀態(tài)如下：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
接下來的任務(wù)就是js的動(dòng)態(tài)修改縮放比 以及 實(shí)現(xiàn)rem根元素字體大小的設(shè)置。
var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
【缺點(diǎn)】以為縮放涉及全局的rem單位，比較適合新項(xiàng)目，對于老項(xiàng)目可能要涉及到比較多的改動(dòng)。
3.設(shè)置 border-image 方案
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("border.png") 2 0 stretch;
border-image: url("border.png") 2 0 stretch;
}
【解釋】border-width 指定邊框的寬度，可以設(shè)定四個(gè)值，分別為上右下左border-width: top right bottom left。
border-image 該例意為：距離圖片上方2px（屬性值上沒有單位）裁剪邊框圖片作為上邊框，下方2px裁剪作為下邊框。距離左右0像素裁剪圖片即沒有邊框，以拉伸方式展示
結(jié)合起來就是：在邊框圖片中，裁剪圖片上下方的2個(gè)像素寬度作為上下邊框，并展示在寬度為1個(gè)像素的邊框空間里。左右沒有邊框。 注意這里的1個(gè)像素是特殊的，專指物理像素，而平時(shí)設(shè)定的長寬1px則表示邏輯像素.
當(dāng)然，這種方式引入了圖片，我們還能將圖片裝換成base64形式表現(xiàn)
【缺點(diǎn)】需要制作圖片，圓角可能出現(xiàn)模糊
- background-image 漸變實(shí)現(xiàn)
除了使用圖片外，當(dāng)然也能使用純css來實(shí)現(xiàn)，百度糯米團(tuán)就是采用的這種方案。
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
【思路】將原本1個(gè)物理像素的邊框大小利用線性漸變分割成幾個(gè)部分（百分比控制），實(shí)現(xiàn)小于1像素效果
【解釋】linear-gradient指定線性漸變，接受大于等于3個(gè)參數(shù)，第一個(gè)為漸變旋轉(zhuǎn)角度，第二個(gè)開始為漸變的顏色和到哪個(gè)位置（百分比）全部變?yōu)樵擃伾?，該例子中，第一句就是，漸變方向旋轉(zhuǎn)180度，即從上往下（默認(rèn)為0度從下往上），從紅色開始漸變，到50%的位置還是紅色，再漸變?yōu)槔^承父元素顏色。
【缺點(diǎn)】因?yàn)槊總€(gè)邊框都是線性漸變顏色實(shí)現(xiàn)，因此無法實(shí)現(xiàn)圓角
- box-shadow 方案
利用陰影也可以實(shí)現(xiàn)，優(yōu)點(diǎn)是沒有圓角問題，缺點(diǎn)是顏色不好控制
div {
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
- transform: scale(0.5) 方案 - 推薦: 很靈活
(1)設(shè)置height: 1px，根據(jù)媒體查詢結(jié)合transform縮放為相應(yīng)尺寸。
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}
(2).用::after和::befor,設(shè)置border-bottom：1px solid #000,然后在縮放-webkit-transform: scaleY(0.5);可以實(shí)現(xiàn)兩根邊線的需求
div::after{
content:'';width:100%;
border-bottom:1px solid #000;
transform: scaleY(0.5);
}
(3).用::after設(shè)置border：1px solid #000; width:200%; height:200%,然后再縮放scaleY(0.5); 優(yōu)點(diǎn)可以實(shí)現(xiàn)圓角，京東就是這么實(shí)現(xiàn)的，缺點(diǎn)是按鈕添加active比較麻煩。
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}
(4) 媒體查詢 + transfrom 對方案1的優(yōu)化
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
