CSS3-Day1

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;
}