CSS3新增属性

机构:北京我赢职场IT教育机构 时间:2016-10-15 点击:1068

  CSS3给我们带来了如:文字阴影(text-shadow)、盒子阴影(box-shadow)、圆角(border-radius)、背景渐变(background: linear-gradient(#000, #fff))、2D变换(transition)、动画(animation)等大家耳熟能详的常用属性外,还有如-webkit-mask、-webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、-webkit-box-reflect、-webkit-marquee、-webkit-box等webkit内核私有属性,至于这些属性其他浏览器支持程度,有兴趣的可以自己研究研究,这上面的每一个属性都有自己的使用场景,就看如何灵活运用。今天我不全部列出,仅简单介绍几个。

  display:-webkit-box,我们知道元素大致分为内联元素、块状元素和介于两者之间的元素,当然还有inline-table、table-cell等神马的,那么display: -webkit-box怎么用呢,什么举个应用场景,对于下图所示的情况,父元素被1、2、3均分,且2和1之间间隔10px,你会怎么做?

  这时候我们可以试试新的display:-webkit-box,另外还有如下属性配合使用,

  -webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit,其中默认值是inline-axis,即横向排列

  -webkit-box-flex 子元素之间比例,仅作一个系数

  -webkit-box-direction 子元素排列顺序 normal | reverse | inherit,其中默认值是normal

  -webkit-box-flex-group 以组为单位的流体系数

  -webkit-box-ordinal-group 以组为单位的子元素排列方向

  -webkit-box-lines 子元素是否换行,类似word-wrap和word-break的作用

  -webkit-box-align 子元素垂直方向的对其方式

  -webkit-box-pack 子元素水平方向的对其方式

  这些配合使用的属性我们全部默认即可

  更多资讯,请访问北京web前端设计培训学校

下一篇:响应式web设计
免费试听

免费体验课开班倒计时

11: 59: 59

稍后会有专业老师给您回电,请保持电话畅通

咨询电话:15893081958
陈老师 QQ:3429316823
返回顶部