CSS3 学习（一）

CSS3 字体

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>

CSS3 border-image 属性

指定作为div元素周围边框的图像

语法：border-image: source slice width outset repeat|initial|inherit;

border-image-source：用于指定要用于绘制边框的图像的位置

border-image-slice：图像边界向内偏移

border-image-width：图像边界的宽度

border-image-outset：用于指定在边框外部绘制 border-image-area 的量

border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

CSS3 border-radius 属性

给div元素添加圆角的边框

语法：border-radius: 1-4 length|% / 1-4 length|%;

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的

CSS3 box-shadow 属性

向 div 元素添加阴影

实现卡片的方法：box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

语法：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需的。水平阴影的位置。允许负值

v-shadow：必需的。垂直阴影的位置。允许负值

blur：可选。模糊距离

spread：可选。阴影的大小

color：可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset：可选。从外层的阴影（开始时）改变阴影内侧阴影

CSS3 背景

background-image：通过background-image属性添加背景图片，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张，可以添加多个

background-size：background-size指定背景图像的大小

background-origin：background-Origin属性指定了背景图像的位置区域（content-box, padding-box,和 border-box）

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

CSS3 渐变（Gradients）

语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS3 文本效果

• text-shadow：文本阴影
• box-shadow：盒子阴影
• text-overflow：溢出属性指定应向用户如何显示溢出内容（clip： 修剪，ellipsis： 显示省略号， string： 用指定字符串显示，只有火狐支持）
• word-wrap：break-word
• word-break：break-all（允许在单词内换行）keep-all（只能在半角空格或连字符处换行）

CSS3 2D 转换（transform）

translate(x,y)：定义 2D 转换，沿着 X 和 Y 轴移动元素。

scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。

rotate(angle)：定义 2D 旋转，在参数中规定角度。

skew(x-angle,y-angle)：定义 2D 倾斜转换，沿着 X 和 Y 轴。

CSS3 过渡（transition）

语法：transition: property duration timing-function delay;

transition-property：指定CSS属性的name，transition效果（none | all |  property）

transition-duration：transition效果需要指定多少秒或毫秒才能完成

transition-timing-function：指定transition效果的转速曲线（linear（规定以相同速度开始至结束的过渡效果） | ease（规定慢速开始，然后变快，然后慢速结束的过渡效果） | ease-in（规定以慢速开始的过渡效果） | ease-out（规定以慢速结束的过渡效果） | ease-in-out（规定以慢速开始和结束的过渡效果） | cubic-bezier(n,n,n,n) （在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值））

transition-delay：定义transition效果开始的时候