CSS3 知识点总结

边框的知识点：

1.border-radius:

border-radius设置的值越大，弧度越大，可以用具体数值10px来设置，也可以用20% 百分比来设置；你也可以只设置一个或其中几个角的弧度，就像这样：

div{
        width:100px;
        height: 100px;
        border:1px solid #333;
        /*border-radius: 20px;*/
        border-bottom-right-radius: 20px;
    }

2.box-shadow:

用来设置一个下拉阴影得框，语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必须的，表示水平阴影的位置，负值表示反方向的
v-shadow	必须的，表示竖直阴影的位置，负值同样表示反方向
blur	可选的，表示模糊程度，越大越模糊
spread	可选，阴影的大小
color	可选，颜色
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

背景知识点：

background-image:

div{
        width: 200px;
        height: 200px;
        /*可以添加多个背景图*/
        /*设置url*/
        background-image:url(img1.png),url(img2.png);
        /*设置位置*/
        background-position: 100px 50px,left top;
        /*是否重复*/
        background-repeat: no-repeat,repeat;
    }

还可以写一块

div{
    background:url(img1.png) 10px 20px no-repeat,url(img2.png) left top repeat;
}

background-size:

用于定义背景图片的大小：

div{
    background:url(logo.png);
    /*这里还可以用百分比 100% 100%表示填充整个区域*/
    background-size:80px 50px;
    background-repeat:no-repeat;
}

background-origin:

background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。

background-clip:

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

---

文本效果:

text-shadow:

添加文字阴影，类似于box-shadow;

文本溢出处理：

white-space:nowrap;//强制不换行
text-overflow:ellipsis;//超出部分用…显示
text-overflow:clip;//超出剪切掉
word-wrap:break-word;//允许长文本换行
word-break:break-all;//允许拆分换行
word-break:keep-all;//不允许拆分换行

---

字体

@font-face{
        /*testFont值的就是你自定义的字体的名称，最好是使用你下载的默认字体名称，它将被引用到你后面的font-family:testFont;*/
        font-family:"testFont";
        /*自定义字体文件得路径，可以是相对路径也可以是绝对路径*/
        src:url("Pokemon Hollow.ttf");
        /*是否加粗*/
        font-weight: normal;
        /*字体样式*/
        font-style: normal;
    }
    p{font-family: testFont;}

---

2D转换

transform:translate(50px,100px):

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

transform:rotate(30deg);

表示以中心为原点顺时针旋转30个弧度，负数表示逆时针旋转；

transform:scale(2,3);

表示横向和纵向增大的倍数，上面就表示横向扩大2倍，竖向扩大3倍；

transform:skew(20deg,30deg);

表示绕x和y轴倾斜的度数；
这几个方法(不包含rotate())都可以单独设置在X或Y上的值；像这样translateX(20px);

3D转换

rotateX(30deg);rotateY(20deg);

表示绕X轴或者Y轴进行立体转换，

---

过渡

tansition

1.指定要添加效果的css属性，
2.指定效果的持续时间。
transition:width 2s,heigth 3s;
也可以分开定义；

div{
        width:200px;
        height: 200px;
        background: yellow;
        /*定义css属性*/
        transition-property: width;
        /*定义持续时间*/
        transition-duration: 1s;
        /*定义时间曲线，默认是ease*/
        transition-timing-function: linear;
        /*定义延迟时间*/
        transition-delay: 2s;
    }

---

动画

@keyframes 规则：

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

css3动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
div{
    width:300px;
    height: 300px;
    /*定义动画名称*/
    animation-name: myfirst;
    /*运行时间*/
    animation-duration: 5s;
    /*运行的时间曲线 默认是ease*/
    animation-timing-function: linear;
    /*延迟时间*/
    animation-delay: 2s;
    /*运行的次数 默认是1*/
    animation-iteration-count: infinite;
    /*是否在下一周逆向播放*/
    animation-direction: alternate;
    /*是否正在运行或暂停*/
    animation-play-state: running;
}
div
{
    animation: myfirst 5s linear 2s infinite alternate;
}