筆記：從新認識CSS3

一、CSS3邊框

• border-radius
• box-shadow
• border-image

二、CSS3背景

• background-image
• background-size
• background-origin
• background-clip

不一樣的背景圖像可用逗號隔開

<style>
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>

background-origin: content-box/padding-box/ border-box
background-origin屬性指定了背景圖像的位置區域

background-clip: content-box/padding-box/ border-box
background-clip屬性規定背景的繪製區域

三、CSS3漸變

• linear-gradient 線性漸變 某個方向
• radial-gradient 徑向漸變 由中心定義

<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, green); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, green); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, green); /* 標準的語法（必須放在最後
    /* background: linear-gradient(to right, red, green); 漸變方向向右 */
    /* background: linear-gradient(to bottom right, red, green); 漸變方向向右下角 */
    /* background: linear-gradient(35deg, red, green); 漸變方向 漸變線35deg */
    /* background: linear-gradient(to right, red, green, blue, orange); 使用多個顏色節點 */
    /* background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 漸變顏色可設置透明度*/
    /* background: repeating-linear-gradient(red, yellow 10%, green 20%); 可重複線性漸變 */
    /* background: radial-gradient(red, green, blue); 徑向漸變 */
    /* background: radial-gradient(circle, red, yellow, green); 設置形狀的徑向漸變 */
    
}
</style>

Internet Explorer 9 及以前的版本不支持漸變。

四、CSS3文字效果

• text-shadow
• box-shadow
• text-overflow
• word-wrap
• word-break

文字效果 text sfdfsfsdfsfsf

<h5 style="text-shadow: 5px 5px 5px #FF0000;">文字效果 text sfdfsfsdfsfsf</h5>

text-overflow: ellipsis; 超出的文本 省略顯示 ...

word-wrap:break-word; 容許長文本換行

word-break: keep-all/break-all 單詞是否拆分換行

五、CSS3字體

可選擇本身須要的字體

<style> 
@font-face
{
    font-family: myfontname;
    src: url(font.woff);
}
div
{
    font-family:myfontname;
}
</style>

六、CSS3轉換

對元素進行移動、縮放、轉動、拉長或拉伸。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

transform屬性

• translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
• rotate()方法，給定度數順時針旋轉元素。
• scale（2,3）轉變寬度爲原來的大小的2倍，和其原始大小3倍的高度。
• skew(30deg,20deg) 元素在X軸和Y軸上傾斜20度30度。
• rotateX(120deg);
• rotateY(130deg);

七、CSS3過渡

元素從一種樣式逐漸改變爲另外一種的效果。

div
{
    width:100px;
    height:100px;
    background:red;
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari or Chrome on MacOS*/
}
div:hover
{
    width:300px;
}

transition屬性

• 指定要添加效果的CSS屬性
• 指定效果的持續時間。

八、CSS3動畫

@keyframes 建立動畫

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
@keyframes myframes
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myframes /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}

animation屬性

• animation-name 規定 @keyframes 動畫的名稱
• animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0
• animation-timing-function 規定動畫的速度曲線。默認是 "ease:慢快慢"；"linear:等速"；"ease-in:低速開始"
• animation-fill-mode，默認none; forwards: 當動畫完成時，或當動畫有一個延遲未開始播放時，要應用到元素的樣式。
• animation-delay 規定動畫什麼時候開始。默認是 0
• animation-iteration-count 規定動畫被播放的次數。默認是 1; "infinite:無限次播放"
• animation-direction 規定動畫是否在下一週期逆向地播放。默認是 "normal"。

九、CSS3分列

• column-count 分割的列數
• column-gap 列間間隙
• column-rule-style 列間邊框
• column-rule-width 列間邊框寬度
• column-rule-color 列間邊框顏色
• column-rule
• column-span 指定元素跨越多少列 默認1，/ all
• column-width 列寬

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
    
}
h2 {column-span: all;}

十、CSS3彈性佈局

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

• flex-direction: row | row-reverse | column | column-reverse
  指定彈性子元素在父容器中的位置。
• justify-content: flex-start | flex-end | center | space-between | space-around 指定在水平軸的內容對齊方式
• align-items: flex-start | flex-end | center | baseline | stretch 子元素在縱軸方向上的對齊方式
• flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit 指定子元素換行方式

• align-content: flex-start | flex-end | center | space-between | space-around | stretch

• align-self: auto | flex-start | flex-end | center | baseline | stretch 子元素自身的對齊方式