CSS3 常用屬性（一）-- 邊框、背景

標籤：垂直   ice   png   ado   webkit   --   html   陰影   映像   

      現今，介面極大的豐富，傳統的 HTML+CSS 已經跟不上時代的步伐，在 CSS3 中，有太多非常好用的屬性，可以很方便的做出種種炫酷的效果，接下來，我將例舉一些常用的 CSS3 的屬性。

　　border-radius：圓角。

border-radius : 50px ; /*四個角的圓角均為50px*/border-radius : 50px  100px; /*左上右下的圓角是50px，左下右上的圓角是100px*/border-radius : 10px 20px 30px 40px;  /*第一個值是左上，第二個值是右上，第三個值是右下，第四個值是左下*/-webkit-border-radius : 50px  100px;/*四個角水平是50px，垂直是100px*/

      box-shadow：元素陰影。

 box-shadow : 10px 20px 5px 10px red inset;/*第一個值表示陰影水平位移（必填），第二個值表示陰影垂直位移（必填），第三個值表示陰影羽化值（必填），第四個值表示陰影大小，第五個值表示陰影顏色（必填），第六個值表示內陰影*/

      border-image：邊框圖片。border-image屬性可以能給元素的邊框添加背景圖片。`border-image`屬性是複合屬性用於設定`border-image-source`，`border-image-slice`，`border-image-width`，` border-image-outset` 和`border-image-repeat` 的值。

border-image-source:url(1.png); /*用於指定要用於繪製邊框的映像的位置*/border-image-slice:33;  /*映像邊界向內位移33%*/border-image-width:20px; /*映像邊界的寬度為20px*/border-image-outset:20px; /*用於指定在邊框外部繪製的量，此處是外偏20px*/border-image-repeat:stretch; /*映像邊框是否應平鋪(repeat)、鋪滿(round)或展開(stretch 預設)*/

 

　　在 CSS3 中，background 又有了一些增加，現例舉三個常用的新增背景屬性。

　　background-size，控制背景圖片的大小。

background-size:100%;/*背景圖片寬度和元素寬度相同，高度為auto*/background-size:100% 100%;/*背景圖片寬高和元素寬高相同，圖片有可能被展開*/background-size:100px;/*背景圖片寬度為100px，高度為auto*/background-size:100px 100px;/*背景圖片寬高均為100px，圖片有可能被展開*/background-size:cover;/*背景圖片較小邊鋪滿整個元素，另一邊auto*/background-size:contain;/*背景圖片較大邊鋪滿整個元素，另一邊auto*/

　　background-clip，後面可以賦值三種，分別是：border-box（邊框域）、padding-box（內間距域）、content-box（內容域），該屬性的意思是背景在哪個地區以內顯示。

　　background-origin，同樣可以賦值三種，分別是：border-box（邊框域）、padding-box（內間距域）、content-box（內容域），該屬性的意思是背景圖片鋪在哪個地區以內，即若沒有設定背景定位的屬性，背景圖片原點落在哪個地區內。

CSS3 常用屬性（一）-- 邊框、背景