邊框

div{
    border:2px solid#aaaaaa ; //邊框粗細(xì) 實(shí)體邊框的顏色
    padding:50px 40px ;  //襯墊大小

    width:300px ;  //寬度
    height:100px ;  //高度

    border-radius:50px;   //圓角半徑
    border-radius:10px,20px,30px,0px;   //坐上角，右上角，右下角，左下角  
    border-radius:10px/20px ;  //橢圓邊框
    border-radius:20%;    //圓角
    border-radius:10%/30%;   //橢圓邊框
    border-top-left-radius:20px;   //左上角弧度
    border-image:url(/xx/xx/xx.png) 30 30 round/stretch;   //圖片邊框：圖片路徑，圖片寬度，圖片高度， 平鋪/拉伸   （CSS3 允許您為元素使用多個(gè)背景圖像。）
}

div{
    box-shadow:10px,10px,5px #aaaaaa;   //方框陰影：左偏移量，下偏移量，漸變度，陰影顏色
    
}

背景

div{
    background:#aaaaaa;   //背景顏色
    background-color:red/#aaaaaa;   //背景顏色
    background:url(/xx/xx/xx.png);   //背景圖片
    background-reoead:repeat/no-repeat;   //背景圖片復(fù)制，不復(fù)制
    background-position:left top;   //背景圖片位置
    background-size:20% 40%；    //
    background-origin:border-box/padding-box/content-box；    //邊框位置，襯墊位置，中心位置
    background-clip:border-box/padding-box/content-box;    //區(qū)域
    
}

文本

div{
    text-shadow:5px 5px 5px #FF0000;    //文本陰影
    word-wrap:break-word;    //長(zhǎng)單詞斷行
}

Paste_Image.png

2D

div{
    transform-origin:20% 40%;    //設(shè)置中心點(diǎn)（旋轉(zhuǎn)中心）
    transform:rotate(19deg);    //旋轉(zhuǎn)
    transform:translate(50px,200px);   //平移
    transform:scale(2,4);    //縮放
    transform:skew(30deg,20deg);    //傾斜
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);   //matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。matrix() 方法
    需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。 
}

Paste_Image.png

樣式的過(guò)渡

Paste_Image.png

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, background 2s,height 2s,transform 2s;
}

div:hover  //鼠標(biāo)滑過(guò)
{
width:200px;
height:200px;
background:red;
transform:rotate(180deg);
}

動(dòng)畫(huà)

Paste_Image.png

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
//第一種寫(xiě)法
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
//第二種寫(xiě)法,多重變化
@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

Paste_Image.png

多列

div{
column-count:5; //文本5列
}

用戶界面

div
{
border:2px solid;
padding:10px 40px; 
width:200px;
resize:both;   //界面大小可由用戶拉伸
overflow:auto;
}