border-box
,表示背景被裁剪到邊框盒。另外兩個(gè)參數(shù):padding-box
,表示背景被裁剪到內(nèi)邊距框;content-box
,表示背景被裁剪到內(nèi)容框。border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
相關(guān)文章:CSS3 Background
多重邊框
(1)box-shadow方法
當(dāng)一個(gè)正值的擴(kuò)展半徑加上兩個(gè)為零的偏移量以及為零的模糊值,得到的“投影”就像是一道實(shí)線邊框,而且幸運(yùn)的是,box-shadow支持逗號(hào)分隔語(yǔ)法,即可以創(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);
要注意的是:投影并不會(huì)影響布局,也可以說投影并不會(huì)占據(jù)真實(shí)的位置,而且投影不會(huì)響應(yīng)鼠標(biāo)事件。如果你要投影也可以響應(yīng)事件,可以設(shè)置內(nèi)陰影,就是box-shadow屬性加上inset關(guān)鍵字,來產(chǎn)生內(nèi)陰影,此時(shí)你還需要增加額外的內(nèi)邊距來放置內(nèi)陰影。
(2)outline方法
當(dāng)你只需兩層邊框時(shí),可以選擇先設(shè)置一層常規(guī)邊框,再加上outline(描邊)屬性來產(chǎn)生外層的邊框。
使用outline
,不僅可以模擬實(shí)線邊框,而且可以產(chǎn)生虛線邊框。
background: yellowgreen;
border: 10px solid #655;
outline: 5px dashed deeppink;
outline-offset: 10px;
outline-offset屬性可以控制描邊與元素邊緣之間的間距,這個(gè)屬性可以接受負(fù)值。
需要注意的是:這種方法并不能產(chǎn)生圓角
靈活的背景定位
background-position屬性允許我們指定背景圖片距離任意角的偏移量,只要我們?cè)谄屏壳懊嬷付P(guān)鍵字。
background: url(sample.jpg) no-repeat #58a;
background-position: right 20px bottom 10px;
上面的代碼將背景圖片跟右邊保持20px的偏移量,同時(shí)跟底邊保持10px的偏移量。
條紋背景
先來理解漸變的規(guī)則,比如下面的例子:
linear-gradient(#000 20%, #fff #80);
這段代碼中漸變是這樣填充的,0~20%的區(qū)域被填充為#000,80%到100%的區(qū)域被填充#fff,而在20%~80%才是顏色真實(shí)漸變的區(qū)域(#000~#fff)
相關(guān)文章:css3 Gradient漸變
水平條紋
兩種顏色:
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
// 等價(jià)于
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
理解這句話:如果某個(gè)色標(biāo)的位置值比整個(gè)列表中在它之前的色標(biāo)的位置值都要小,則該色標(biāo)的位置值會(huì)被設(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è)置多背景時(shí),背景之間的層疊關(guān)系是:前面的背景會(huì)覆蓋在后面的背景之上。
更多看這里:http://lea.verou.me/css3patterns/
自適應(yīng)的橢圓形
border-radius屬性其實(shí)可以這樣設(shè)置的:
border-radius: 100px / 75px;
這是神馬意思呢?其實(shí)這是單獨(dú)設(shè)置水平和垂直半徑,也是利用此屬性,我們可以實(shí)現(xiàn)精確的橢圓:
border-radius: 50%; ==> border-radius: 50% / 50%;
這樣子設(shè)置的話,當(dāng)元素高寬一致時(shí),會(huì)呈現(xiàn)圓形;當(dāng)高寬不一致時(shí),就會(huì)呈現(xiàn)橢圓了。
半橢圓
border-radius: 50% / 100% 100% 0 0;
==> border-radius: 50% 50% 50% 50% / 100% 100% 0 0;
有兩點(diǎn)需要注意:
四分之一橢圓
border-radius: 100% 0 0;
平行四邊形
利用skew()
扭曲來實(shí)現(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);
多個(gè)切角
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)簽頁(yè)
.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有第四個(gè)長(zhǎng)度參數(shù),表示模糊半徑(擴(kuò)張半徑)。這個(gè)參數(shù)會(huì)根據(jù)你指定的值去擴(kuò)展或(當(dāng)指定負(fù)值時(shí))縮小投影的尺寸。
box-shadow: 0 5px 4px -4px black;
上面的原理是:當(dāng)擴(kuò)張半徑的值剛好與模糊半徑相同時(shí),我們是看不見投影的,除非使用了偏移量(第1個(gè)和第2個(gè)參數(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屬性允許我們?cè)O(shè)置tab的寬度,它接受一個(gè)數(shù)字。
tab-size: 2;
自定義下劃線
利用背景來設(shè)置:
(1)實(shí)線
.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;
}
如需了解詳情,請(qǐng)閱讀《CSS揭秘》這本書。不過在這里多說一句,這本書不是入門書籍,想深入CSS的可以閱讀!
更多建議: