媒体查询,断点,流失布局
@media:媒体查询
断点breakpoint:
就是你想改变浏览器的大小,并决定需要一种新布局,改变布局的宽度就成为断点。例如320,480,640,960
多栏
CSS columns属性:创建多个栏,像报纸文本一样布局。
columns属性是column-count,columns-width的简写
columns-rule类似于border,其属性有column-rulewidth, column-rule-style,columns-rule-color.
column-span属性的值为all,会使元素能够横跨所有栏。
边框图像
border-image把图像切分为9个区域,利用边框的左右宽度和边框的上下高度把图像的角放入元素的角中。
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-image是以上的简写属性。
1,设置边框图像
border-style唯一必须
例如:border:solid
2,border-image-source
border-image:url("");
3,border-image-slice
定义1-4种长度,用于设置标记区域的图像的每条边缘的距离。
分别代表图像上、右、下、左边缘向里的偏移量。单位像素。
可选fill保存图像中间部分。
border-image:url(stamp.png) 0 5 0 20 fill……
4,border-image-width
设置元素边框的宽度
5,border-image-outset
指定边框图像区域在全部四条边扩展到边框方块之外的数量,默认0
6,border-image-repeat
属性值:
stretch
repeat
round
space
以上属性应用后:
border-image:url(stamp.png) stretch 0 5 0 20 fill / 0 5px 0 20px;
border-image:url(stamp.png) round 9 / 9px / 12px
flex
见文章。
@support进行特性检测
提供图像
1,retina 高像素密度的显示屏
2,background-size
3,数据URI
4,精灵Sprite
5,image-set
6,字体图标
7,CSS遮罩-mask
8,客户提示clinet-hints还未实现。