本系列主要總結Css3一些新特性的認識，來源於《css揭秘》書。 一、半透明邊框 css3最好用hsla，而不是rgba，hsla是：h：顏色值(0~360)；s：飽合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1) background-clip：裁剪背景顏色，預設為bord ...
本系列主要總結Css3一些新特性的認識，來源於《css揭秘》書。
一、半透明邊框
- css3最好用hsla，而不是rgba，hsla是：h：顏色值(0~360)；s：飽合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1)
- background-clip：裁剪背景顏色，預設為border-box(背景顏色擴散到border）；padding-box（背景顏色擴散到padding）；content-box（背景顏色擴展到content)
- 示例代碼：
width:200px;
height:200px;
background: rebeccapurple;
border: 10px solid hsla(300, 0%, 50%, 0.5);
background-clip: padding-box; //去掉和添加上此項可以看出效果
二、多重邊框實現
- box-shadow：設置或檢索對象陰影，格式：box-shadow: none | <length>{2,4} && color? | inset?
- length<1>: 水平偏移，可負值
- length<2>: 垂直偏移，可負值
- length< 3 >: 陰影模糊值，不可負值
- length<4>：外延長度，可負值
- <color>：陰影顏色
- inset：表示為內陰影，為空表示外陰影
- 可以設置多組效果，多組之間用逗號隔開（利用可box-shadow可重疊特性來設置多重邊框，但邊框樣式不可做也條紋、虛線之類的）
- 如果要設置檢索文本陰影，用text-shadow屬性
- outline實現兩個邊框（只能實現兩重邊框，但邊框樣式靈活）
三、背景的定位
- background-position：背景定位，值說明如下
- center，left，top，bottom，right等都是表示背景從何地開始顯示，如果設置重覆平鋪，會有不同的效果
- 值可是數值或百分比：background-position: right 20px bottom 30px;
- background-origin：背景圖片的定位參數，三值context-box，padding-box，border-box等。
- clac()計算寬度的函數
- 示例代碼如下：
background-image: url('../img/bck.png');
background-repeat: no-repeat;
background-size: 40px 40px;
width:200px;
height:200px;
margin-top:10px;
border: 5px solid red;
--background-position: right 0px bottom 0px;
background-origin: content-box;
background-position: calc(100% - 50px);
padding: 10px;
四、多重圓角邊框
- box-shadow：他的圓角是會跟隨border-radius走的，而outline且不會。
- 最小陰影(box-shadow)計算公式為：勾股定理，設置陰影時應該大於此值
- 示例代碼：
margin: 10px auto;
width: 10em;
height: 8em;
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #556;
