CSS3新屬性簡單總結（1）

標籤：style   blog   color   io   os   ar   sp   div   on   

一、邊框1.border-radius

簡略寫法：

div{border:2px solid #a1a1a1;border-radius:25px;/*IE9+、Firefox4+、Chrome、Safari5+、Opera*/-moz-border-radius:25px; /* 老的 Firefox */}

值：px、em、%

多種寫法：

/*border-radius:25px等價於*/border-top-left-radius:25px;border-top-right-radius:25px;border-bottom-right-radius:25px;border-bottom-left-radius:25px;/*從top-left開始順時針*/border-radius:25px 0px 25px 0px/*等價於*/border-radius:25px 0px/*不規則圓角*/border-radius: 2em 1em 4em / 0.5em 3em;/*等價於*/border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 0.5em;border-bottom-left-radius: 1em 3em;

2.box-shadow

簡略寫法：

/*IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支援 box-shadow 屬性。*/
div{    box-shadow: 10px 10px 5px #888888;}

文法：

box-shadow: h-shadow v-shadow blur spread color inset;/*h-shadow    必需。水平陰影的位置，允許負值。v-shadow    必需。垂直陰影的位置，允許負值。    blur        可選。模糊距離。spread      可選。陰影的尺寸。    color       可選。陰影的顏色。inset       可選。將外部陰影 (outset) 改為內部陰影。*/ 

 3.box-image

簡略寫法：

div{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;/*Internet Explorer 11, Firefox, Opera 15, Chrome , Safari 6*/}

完整屬性：

• border-image-source  圖片路徑
• border-image-slice     圖片邊框向內位移
• border-image-width    圖片邊框寬度
• border-image-outset   邊框圖片地區超出邊框的量
• border-image-repeat   repeated平鋪、stretched展開、rounded鋪滿

 二、背景1.background-size

簡略寫法：

/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+*/div{background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;}

值：px、em、%、cover、contain

2.background-origin

簡略寫法：

/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 。*/div{background-image:url(‘smiley.gif‘);background-repeat:no-repeat;background-position:left;background-origin:content-box;}

值：content-box、padding-box、border-box；

background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。

如果背景映像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果

3.background-clip

簡略寫法：

/*IE9+、Firefox、Opera、Chrome 以及 Safari */div{background-color:yellow;background-clip:content-box;}

值：content-box、padding-box、border-box；

三、文字效果1.text-shadow

/*Internet Explorer 9+及其他*//*text-shadow: h-shadow v-shadow blur color;*/h1{text-shadow: 5px 5px 5px #FF0000;}

2.text-overflow

div.test{text-overflow:ellipsis;}

值：clip、ellipsis、string

3.word-break

/*Opera不支援*/p.test {word-break:hyphenate;}

值：normal、break-all、keep-all

4.word-wrap

p.test {word-wrap:break-word;}

值：normal、break-word（在長單詞或 URL 地址內部進行換行）

 

CSS3新屬性簡單總結（1）