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;