百分比 100% otto .com src PE 整體 position tom

一、盒子邊框

1、盒子圓角：border-radius：像素或者百分比

2、盒子陰影：box-shadow

屬性：X 軸偏移量 ， Y 軸便宜量 顏色的虛幻程度 陰影的顏色 陰影的位置 (陰影默認在外部 inset是設置在內部)

（偏移量可以使負值，左負右正，上負下正）

#a1{
            width: 100px;
            height: 100px;
            border: 1px solid #0000FF;
            background
 
-image: url(QQ圖片20180506095022.png);
            background-repeat: no-repeat;
            background-position: 20px 20px ;
            border-radius: 50%;}

二、背景

1、引入：background-image:url()

2、尺寸：size：100% 100%

3、平鋪：repeat：no-repeat

4、位置：origin：content-box border-box padding-box position：top right left bottom（距左多少，距上多少7）

三、字體

1、字體的陰影：text-shadow：x軸 y軸 陰影的模糊程度 陰影顏色

2、字體溢出顯示 over-flow：hidden white-space：nowap；

3、英文字體的換行

①，word-break:break-all 例如div寬200px，
　　它的內容就會到200px自動換行，
　　如果該行末端有個英文單詞很長（congratulation等），
　　它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，
　　下一行為tulation（conguatulation）的後端部分了。

②、word-wrap:break-word 例子與上面一樣，
但區別就是它會把congratulation整個單詞看成一個整體，
如果該行末端寬度不夠顯示整個單詞，
它會自動把整個單詞放到下一行，
而不會把單詞截斷掉的。

#a2{
            width: 200px;
            height: 50px;
            border: 1px solid chartreuse;
            word
 
-break: break-word;
            
        }

四、透明度

1、opcity：0~1 越小越透明

2、background-color，rgba（）：

五、漸變色

1、background-image：linear-gradient（指向方向，顏色1，顏色2，顏色3）：

#a3{
            width: 200px;
            height: 100px;
            border: 1px solid #7FFF00;
            color: black;
            background-image: linear-gradient(to top,blue,yellow,red);
            
        }

六、圖片

1、img：src

2、鼠標移上顯示（註釋）

3、圖片的圓角：border-radius

4、圖片的陰影：box-shadow

5、圖片的濾鏡：filter

CSS3邊框