CSS魔法

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

相關(guān)文章：CSS3 Background

多重邊框

（1）box-shadow方法

當(dāng)一個正值的擴展半徑加上兩個為零的偏移量以及為零的模糊值，得到的“投影”就像是一道實線邊框，而且幸運的是，box-shadow支持逗號分隔語法，即可以創(chuàng)建任意數(shù)量的投影。

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);

要注意的是：投影并不會影響布局，也可以說投影并不會占據(jù)真實的位置，而且投影不會響應(yīng)鼠標(biāo)事件。如果你要投影也可以響應(yīng)事件，可以設(shè)置內(nèi)陰影，就是box-shadow屬性加上inset關(guān)鍵字，來產(chǎn)生內(nèi)陰影，此時你還需要增加額外的內(nèi)邊距來放置內(nèi)陰影。

（2）outline方法

當(dāng)你只需兩層邊框時，可以選擇先設(shè)置一層常規(guī)邊框，再加上outline（描邊）屬性來產(chǎn)生外層的邊框。

使用outline，不僅可以模擬實線邊框，而且可以產(chǎn)生虛線邊框。

background: yellowgreen;
border: 10px solid #655;
outline: 5px dashed deeppink;
outline-offset: 10px;

outline-offset屬性可以控制描邊與元素邊緣之間的間距，這個屬性可以接受負(fù)值。

需要注意的是：這種方法并不能產(chǎn)生圓角

靈活的背景定位

background-position屬性允許我們指定背景圖片距離任意角的偏移量，只要我們在偏移量前面指定關(guān)鍵字。

background: url(sample.jpg) no-repeat #58a;
background-position: right 20px bottom 10px;

上面的代碼將背景圖片跟右邊保持20px的偏移量，同時跟底邊保持10px的偏移量。

條紋背景

先來理解漸變的規(guī)則，比如下面的例子：

linear-gradient(#000 20%, #fff #80);

這段代碼中漸變是這樣填充的，0~20%的區(qū)域被填充為#000，80%到100%的區(qū)域被填充#fff，而在20%~80%才是顏色真實漸變的區(qū)域（#000~#fff）

相關(guān)文章：css3 Gradient漸變

水平條紋

兩種顏色：

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

// 等價于
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;

理解這句話：如果某個色標(biāo)的位置值比整個列表中在它之前的色標(biāo)的位置值都要小，則該色標(biāo)的位置值會被設(shè)置為它前面所有色標(biāo)位置值的最大值。

三種顏色：

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

垂直條紋

background: linear-gradient(to right, #fb3 50%, #58a 0);  /* to right == 90deg */
background-size: 30px 100%;

斜向條紋

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

不止45度

background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px)

repeating-linear-gradient()原理是這樣的：

background: repeating-linear-gradient(60deg,
            #fb3, #fb3 15px, #58a 15px, #58a 30px,
            #fb3 30px, #fb3 45px, #58a 45px, #58a 60px,
            #fb3 60px, #fb3 75px, #58a 75px, #58a 90px,....)

復(fù)雜的背景圖案

方格桌布

background:white;
background-image: linear-gradient(90deg,
                  rgba(200,0,0,.5) 50%, transparent 0),
                  linear-gradient( 
                  rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

background-image在設(shè)置多背景時，背景之間的層疊關(guān)系是：前面的背景會覆蓋在后面的背景之上。

更多看這里：http://lea.verou.me/css3patterns/

自適應(yīng)的橢圓形

border-radius屬性其實可以這樣設(shè)置的：

border-radius: 100px / 75px;

這是神馬意思呢？其實這是單獨設(shè)置水平和垂直半徑，也是利用此屬性，我們可以實現(xiàn)精確的橢圓：

border-radius: 50%;  ==> border-radius: 50% / 50%;

這樣子設(shè)置的話，當(dāng)元素高寬一致時，會呈現(xiàn)圓形；當(dāng)高寬不一致時，就會呈現(xiàn)橢圓了。

半橢圓

border-radius: 50% / 100% 100% 0 0; 
==> border-radius: 50% 50% 50% 50% / 100% 100% 0 0;

有兩點需要注意：

• 順序：左上（border-top-left）、右上（border-top-right）、右下（border-bottom-right）、左下（border-bottom-left）
  
• 省略值時，如果提供3個值，則第4個值與第2個值相同；如果提供兩個值，則第3個和第1個值相同。

四分之一橢圓

border-radius: 100% 0 0;

平行四邊形

利用skew()扭曲來實現(xiàn)：

div{
 position: relative;
}
div::before{
  content: "";
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #58a;
  transform: skew(45deg);
}

菱形

.picture{
  width: 400px;
  transform: rotate(45deg);
  overflow:hidden;
}
.picture > img{
  max-width: 100%;
  transform: rotate(-45deg) scale(1.42);
}

clip-path方式：

.picture img {
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

相關(guān)文章：clip 和 clip-path

切角效果

background: linear-gradient(-45deg, transparent 15px, #58a 0);

多個切角

background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
           linear-gradient(-135deg, transparent 15px, #58a 0) top right,
           linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
           linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

弧形切角

background: 
  radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
  radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
  radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
  radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;  
background-repeat: no-repeat;

梯形標(biāo)簽頁

.tab{
  position: relative;
  padding: .5em 1em .35em;
  color: white;
}
.tab::before {
  content: "";
  position:absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: #58a;
  transform: perspective(.5em) rotateX(5deg);
  transform-origin: bottom;
}

試著將transform-origin屬性設(shè)置為bottom left或bottom right看看。

單側(cè)投影

box-shadow有第四個長度參數(shù)，表示模糊半徑（擴張半徑）。這個參數(shù)會根據(jù)你指定的值去擴展或（當(dāng)指定負(fù)值時）縮小投影的尺寸。

box-shadow: 0 5px 4px -4px black;

上面的原理是：當(dāng)擴張半徑的值剛好與模糊半徑相同時，我們是看不見投影的，除非使用了偏移量（第1個和第2個參數(shù)）。

雙側(cè)投影

box-shadow: 5px 0 5px -5px black,
            -5px 0 5px -5px black;

不規(guī)則投影

filter: drop-shadow(2px 2px 10px rgba(255,255,255,.5));

染色效果

（1）基于濾鏡

.filter > img {
  transition: .5s filter;
  filter: sepia(1) saturate(4) hue-rotate(295deg);
}
.filter > img:hover{
  filter: none;
}

在這里添加了鼠標(biāo)移上去的效果。

相關(guān)文章：CSS3濾鏡

（2）基于混合模式

.tinted-image{
  background-size: cover;
  background-color: hsl(335, 100%, 50%);
  background-blend-mode: luminosity;
  transition: .5s background-color;
}
.tinted-image:hover{
  background-color: transparent;
}

相關(guān)文章：瞧瞧CSS3的混合模式

毛玻璃效果

.glass::before {
  content: "";
  position:absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  filter: blur(20px);
  margin: -30px;
  background: url(sample.jpg) 0 / cover fixed;
}
.glass {
  position:relative;
  background: hsla(0,0%,100%,.3);
  overflow:hidden;
}

折角

（1）45度折角

.angle {
  background: linear-gradient(to left bottom,
                    transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
              linear-gradient(-135deg, transparent 1.5em, #58a 0);
}

文本行的斑馬條紋

.ban {
  padding: .5em;
  line-height:1.5;
  background:beige;
  background-size: auto 3em;
  background-origin: content-box;
  background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

調(diào)整tab的寬度

tab-size屬性允許我們設(shè)置tab的寬度，它接受一個數(shù)字。

tab-size: 2;

自定義下劃線

利用背景來設(shè)置：

（1）實線

.underline {
  background: linear-gradient(gray,gray) no-repeat;
  background-size: 100% 1px;
  background-position: 0 1.15em;
}

（2）虛線

.underline2 {   
  display:inline-block;   
  background: linear-gradient(90deg,red 50%, transparent 0) repeat-x;   
  background-size: .2em 1px;   
  background-position: 0 1.15em;   
}

文字效果

（1）凸版印刷效果

.letterpress{
  background: hsl(210, 13%, 40%);
  color: hsl(210, 13%, 75%);
  text-shadow: 0 -1px 1px black;
}

（2）文字外發(fā)光效果

.highlight {
  color: #ffc;
  text-shadow: 0 0 .2em, 0 0 .3em;
}

（3）文字凸起效果

.extruded {
  color: white;
  text-shadow: 0 1px hsl(0,0%,85%),
               0 2px hsl(0,0%,80%),
               0 3px hsl(0,0%,75%),
               0 4px hsl(0,0%,70%),
               0 5px hsl(0,0%,65%),
               0 5px 10px black;
}

如需了解詳情，請閱讀《CSS揭秘》這本書。不過在這里多說一句，這本書不是入門書籍，想深入CSS的可以閱讀！