1.backgrouond簡(jiǎn)寫
- 在background簡(jiǎn)寫屬性中指定background-sizing時(shí)官撼,需要提供一個(gè)background-position值,而且要使用/作為分隔。
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
-----P13-----
2.background-clip
規(guī)定背景的繪制區(qū)域:
得到一個(gè)白色背景并且有白色邊框的盒子:
border:10px solid hsla(0,0,100%,.5);
background:white;
background-clip:padding-box
若不設(shè)置background-clip袭艺,背景會(huì)延伸至邊框庸诱,邊框的透明無法顯示
------P18-------
3.雙重邊框
box-shadow
background:orange;
box-shadow:0 0 010px #655 , 0 0 0 15px deeppink; /*可以加任意層數(shù)邊框*/
outline
width:180px;
height:90px;
margin:30px auto;
text-align:center;
padding:10px;
background:#655;
outline: #fff dashed 1px;
outline-offset: -15px; /*設(shè)置outline向內(nèi)縮進(jìn)*/
border-radius:8px;
得到簡(jiǎn)單的縫邊效果
注意: outline可能會(huì)產(chǎn)生不貼合border-radius圓角的情況
----P20----
4.box-shadow
-
只給下方設(shè)置陰影,(擴(kuò)張半徑為負(fù)的模糊半徑):
box-shadow: 0 5px 4px -4px black;
-
臨邊投影粗卜,(擴(kuò)張半徑為負(fù)的模糊半徑的一半):
box-shadow: 3px 3px 6px -3px black;
----P88----
5.linear-gradient
取值 : (deg,color1 [%/num],color2[%/num]...)
1>角度:表示漸變的方向
0°表示從下到上屋确,也可以是特殊的 : to top/bottom/left/right
2>顏色
3> 顏色后數(shù)字或取值
表示指某個(gè)顏色值距離起點(diǎn)的開始位置 : 50%,20px......
注意:如果某個(gè)色標(biāo)的位置值比整個(gè)列表中在它之前的色標(biāo)的位置值都要小,則該色標(biāo)的位置值會(huì)被設(shè)置為它前面所有色標(biāo)位置值的最大值续扔。
.box{
width:200px;
height:150px;
background-color:#58a;
background:linear-gradient(-135deg,red 2em,#58a 0);
}
結(jié)果
6.設(shè)置文字段落效果(hyphens屬性)
text-align:justify;
hyphens:auto;