本文适合快速浏览和回忆CSS3新特性,具体内容查看[菜鸟教程]。
边框:
- border-radius
- box-shadow
- border-image
box-shadow:x轴正向偏移 y轴正向偏移 阴影粗细 阴影颜色;
CSS3 border-radius - 指定每个圆角:
如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
一个值: 四个圆角值相同
椭圆边框:
1.border-radius:50px/15px;
2.border-radius:50%;
背景:
- background-image
- background-size
- background-origin
- background-clip
bakcground-image:url(xxx.img),url(xxx.img)……可以有多个背景;
background-origin:content-box/padding-box/border-box;背景图片相对盒子定位;
background-clip:类似于origin,keywords是一样的,但clip是对图片的裁剪,而origin相当于缩放;
渐变:
- 线性渐变:(background:)linear-gradient(direction,color1,color2);
- 径向渐变:(background:)radial-gradient(center,shape size,start-color,…,last color);
线性渐变direction:
方式一:top/left/right/bottom/left top/right bottom……
方式二:角度deg:0deg为top,然后deg增加和顺时针一样。可以用负数(逆时针方向)表示;
文本:
- @font-face
- text-shadow
- text-overflow:elipsis/clip
- word-wrap:break-word
- word-break:keep-all/break-all
@font-face:自定义字体:
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
text-shadow与box-shadow使用方法类似;
text-overflow:当容器设置overflow:hidden时,超出的文本会被隐藏,而text-overflow能够使文本能看出被隐藏的效果;
word-wrap:break-word:强制换行;
word-break:keep-all不拆分单词换行,break-all拆分单词换行;
2D/3D转换:
2D转换:
函数 | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
3D转换:
函数 | 描述 |
---|---|
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
过渡:
- transition:[指定添加效果的CSS属性] [指定效果的持续时间] (,[CSS属性][持续时间],…)
可以多项改变,添加逗号分隔即可;
过渡属性:(过渡属性可以直接在transition中写全,或者一项项列出来)
属性 | 描述 |
---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 |
transition-property | 规定应用过渡的 CSS 属性的名称。 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
动画:
- @keyframes
与@font-face类似,也与transition类似:
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
多列:
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-width
多列可以使文本内容设计得像报纸一样多列布局。
用户界面:
- resize:both;
- box-sizing: border-box;
- outline-off: XXXpx;
resize:将容器框变成用户可拖拉和控制大小的框;
box-sizing:将容器大小固定,即content+padding+border+margin=width;
outline-off:给容器添加一层外边框,属性px值为与内边框的距离。
图片:
响应式图片:
img {
max-width: 100%;
height: auto;
}
滤镜: filter: grayscale(100%);
弹性盒子(Flex Box):
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
常用属性为:
属性 | 描述 |
---|---|
display | 指定 HTML 元素盒子类型。 |
flex-direction | 指定了弹性容器中子元素的排列方式 |
justify-content | 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。 |
align-items | 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 |
flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
align-content | 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 |
flex-flow | flex-direction 和 flex-wrap 的简写 |
order | 设置弹性盒子的子元素排列顺序。 |
align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
flex | 设置弹性盒子的子元素如何分配空间。 |
多媒体查询:
@media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则,但是这些多媒体类型在很多设备上支持还不够友好。
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。
媒体查询可用于:
* viewport(视窗) 的宽度与高度
* 设备的宽度与高度
* 朝向 (智能手机横屏,竖屏) 。
* 分辨率
* ……