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效果开始的时候