6月6日HTML5

昨日日记https://blog.csdn.net/P_xuebuhui/article/details/106576463

CSS3中新增的背景属性

background-clip

background-origin

background-size

backgroun-break

边框相关样式
border-radius圆角边框的绘制

border-image差不多就是对图形切割
border-image:url(图像路径) 上边距 右边距 下边距 左边距/border 上宽度 border 右宽度 border 下宽度 border 左宽度:
指示四条边的背景的显示方法

CSS3中的变形功能
transform
rotate旋转transform:rotate(角度deg)
scale缩放放大transform:scale(值)

skew倾斜transform:skew(值)

translate移动

transform-origin改变元素基点

CSS3的动画功能
transition
1.transition-property

2.transition-duration

3.transition-timing-function

4.transition-delay

Animations
使用方法

多栏布局

• column-count:指定栏目数来生成分栏
• column-width指定栏目宽度来生成分栏
• column-gap指定栏目与栏目之间的距离
• column-rule栏目与栏目之间增加一条分割线

弹性盒布局
自适应窗口的弹性盒布局
使得DIV的宽度随浏览器窗口变化而变换

改变元素的显示顺序的弹性盒布局

改变元素的排列方向的弹性盒布局

使用box-flex属性清除空白，对多个元素使用box-flex属性可以是元素的总宽度或者总高度都等于浏览器或容器的高度。

box-pack及box-align
指定元素中的文字，图像，以及子元素的水平方向或者是垂直向上的对齐方式

值

Media Queries
@media 设备类型 and (设备特征){样式代码}

兼容性问题
各类浏览器的使用方法
-ms-（IE9）
-moz-（Firefox）
-webkit-（Safari和Chrome）
-o-（Opera）