CSS3圆角
border-radius
CSS3盒阴影
box-shadow
CSS3边界图片
border-image
CSS3 background-clip属性
padding-box 沿着边框填充
content-box 在边框外面
CSS3 线性渐变
线性渐变 - 从上到下（默认情况下）#grad {
background-image: linear-gradient(#e66465, #9198e5);
}
线性渐变 - 从左到右
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}
线性渐变 - 对角
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
使用透明度（transparent）
们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
重复的线性渐变
#grad {
/* 标准的语法 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
CSS3 径向渐变
#grad {
background-image: radial-gradient(red, yellow, green);
}
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
CSS3 文本效果
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 box-shadow属性
div {
box-shadow: 10px 10px 5px #888888;
div {
box-shadow: 10px 10px grey;阴影添加颜色
}
}
div {
box-shadow: 10px 10px 5px grey;添加模糊效果
}
CSS3 Text Overflow属性
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
CSS3 单词拆分换行
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
CSS3 字体
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
2D 转换
- translate()
- rotate()
- scale()
- skew()
- matrix()
3D 转换
- rotateX()
- rotateY()
CSS3 过渡
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover
{
width:300px;
}