邊框
div{
border:2px solid#aaaaaa ; //邊框粗細(xì) 實體邊框的顏色
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 允許您為元素使用多個背景圖像撵颊。）
}
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; //長單詞斷行
}
Paste_Image.png
2D
div{
transform-origin:20% 40%; //設(shè)置中心點（旋轉(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() 方法
需要六個參數(shù)，包含數(shù)學(xué)函數(shù)警医，允許您：旋轉(zhuǎn)亿胸、縮放、移動以及傾斜元素预皇。
}
Paste_Image.png
樣式的過渡
Paste_Image.png
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, background 2s,height 2s,transform 2s;
}
div:hover //鼠標(biāo)滑過
{
width:200px;
height:200px;
background:red;
transform:rotate(180deg);
}
動畫
Paste_Image.png
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
//第一種寫法
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
//第二種寫法,多重變化
@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;
}
