css3-邊框 陰影 漸變 背景 文本效果
邊框
CSS3 圓角邊框（border-radius ）
border-radius: 10px 20px 30px 40px;
四個值：左上/右上/右下/左下
border-radius: 10px 30px 40px;
三個值: 左上/右上左下/右下
border-radius: 10px 40px;
兩個值:左上右下/右上左下
border-radius: 50%;
border-bottom-left-radius:50% ;
陰影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平陰影的位置。允許負值
v-shadow 必需的。垂直陰影的位置。允許負值
blur 可選。模糊距離
spread 可選。陰影的大小
color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表
inset 可選。從外層的陰影（開始時）改變陰影內側陰影
例：
多個陰影：box-shadow: 10px 10px 5px #888888, inset 3px 3px 5px #f00;
注：有多個陰影須用逗號分隔繼續寫
漸變
線性漸變 linear-gradient()
重復的線性漸變 repeating-linear-gradient()
background-image: linear-gradient(45deg,#ff0000,#ffff00,#0000ff); /*線性漸變*/
徑向漸變 radial-gradient()
background-image: radial-gradient(circle,#f00,#ff0,#0f0,#00f);/*徑向漸變*/
背景
background: url(img/01.jpg) no-repeat;
background-clip規定背景的繪制區域
/*content-box 從內容區域部分繪制背景*/
/*border-box 從邊框(不包含邊框)區域部分繪制背景*/
/*padding-box 從內邊距部分開始繪制背景*/
background-origin規定背景圖片的定位區域
background-size規定背景圖片的尺寸
/*cover 填充滿盒子，但是有可能超出盒子*/
/*contain 按照一定的比例去填充盒子，不會超出盒子*/
文本效果
文本陰影 text-shadow: -5px -5px 20px red;
添加文字描邊 -webkit-text-stroke: 3px red;
強制單詞換行 word-wrap: break-word;
/*下面三行出現省略號，注意只能是單行文本*/
overflow: hidden;
white-space: nowrap;
/*normal 默認*/
/*nowrap 不換行*/
text-overflow: ellipsis;