[css3]知识点积累


animation  , keyframes

.rotate {

    -webkit-transform-style: preserve-3d;/*保留被转换的子元素3d属性*/

    -webkit-animation-name: refreshing;

    -webkit-animation-duration: 0.7s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

}

@-webkit-keyframes refreshing {

     0% { -webkit-transform: rotateZ(0deg); }

     25% { -webkit-transform: rotateZ(90deg); }

     50% { -webkit-transform: rotateZ(180deg); }

     75% { -webkit-transform: rotateZ(270deg); }

     100% { -webkit-transform: rotateZ(360deg); }

}

-webkit-text-size-adjust

1、当样式表里font-size < 12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上会导致页面缩放失效(使字体大小不受设备终端的调整)

3、body会继承定义在html的样式

4、用-webkit-text-size-adjust不要定义成可继承的或全局的

例子:

body{

    -webkit-text-size-adjust: none;

    -moz-text-size-adjust:none;

    -ms-text-size-adjust: none;text-size-adjust: none;

}

-webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮,设置颜色的alpha值为0即可。

例子:

body{-webkit-tap-highlight-color: rgba(0,0,0,0);}

-webkit-gradient 线性渐变

第一个参数:linear

第二个参数:两个坐标left top, right top即左上角和右上角,也是0% 0%, 100% 0%

(0%表示最左,最上)

第三个参数:from  rgba

第四个参数:to    rgba

例子:

.nav-mask {

background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(rgba(255,255,255,.95)));

}

background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.7)));

第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);

当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;

当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;

当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;

当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;

display:box情况下的 box-pack,box-flex

box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。

值: start|end|center|justify;

div#DemoArea{

  display:box;

  box-pack:center;

}

box-align:center;同box-pack的含义。

#inner {

        position: absolute;

        top: 50%;

        left: 50%;

        width: 100px;

        height: 100px;

        border: 25px solid yellow;

        padding: 25px;

        background-color: red;

        -ms-transform: translate(-50%,-50%);

        -moz-transform: translate(-50%,-50%);

        -o-transform: translate(-50%,-50%);

        transform: translate(-50%,-50%);

   }

在 translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的,为了说明这一点,我们在 innner 元素加上一些 padding 和 border

-webkit-box-flex:3;

box-flex 属性规定框的子元素是否可伸缩其尺寸。

提示:可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间。

value 元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

div{

    display:-moz-box;

    display:-webkit-box /* 外面是box */

    display:box;

    width:300px;

    border:1px solid black;

}

#p1{

    -moz-box-flex:1.0;

    -webkit-box-flex:2.0;

    box-flex:1.0; /* 里面是box-flex是1.0 */

    border:1px solid red;

}

#p2{

    -moz-box-flex:2.0;

    -webkit-box-flex:1.0;

    box-flex:2.0; /* 里面是box-flex是2.0 */

    border:1px solid blue;

}

vertical-align:-2px;

-2px 表示在父元素bottom向下两个像素

-20% 也表示向下line-height高度的20%

如果开发中使用的是height与line-height相同的取值,会大大减少不同浏览器出现差别的情况

white-space: nowrap;

规定段落中的文本不进行换行

white-space 属性设置如何处理元素内的空白。

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

-webkit-border-top-left-radius:100%;

如果border-radius:100%就是四个角都是100%,相当于把正方形变成圆型。

如果是一个长方形,则border-radius:100%会变成椭圆。

如果只对左上角设置border-top-left-radius:100%表示只有左上角变成圆形。

background新增的3改CSS3属性

(1)background-clip 规定背景的绘制区域。

规定背景的绘制区域:

border-box 背景被裁剪到边框盒。 测试

padding-box 背景被裁剪到内边距框。 测试

content-box 背景被裁剪到内容框。

div{

  width:300px;

  height:300px;

  padding:50px;

  background-color:yellow;

  background-clip:content-box;/*分别试验3个值*/

  border:2px solid #92b901;

}

(2)background-origin 规定背景图片的定位区域。

相对于内容框来定位背景图像。这个比较容易理解就是以谁为准显示图片,到底是以content,padding,还是border为准。

padding-box 背景图像相对于内边距框来定位。

border-box 背景图像相对于边框盒来定位。

content-box 背景图像相对于内容框来定位。

#MyDIV{

    padding:25px;

    border:10px dotted #000000;

    background-image:url(‘/i/eg_smile.gif’);

    background-origin:content-box;/* 依次变化3个值试试 */

    background-repeat:no-repeat;

}

如果背景图像的 background-attachment 属性为 “fixed”,则该属性没有效果。

(3)background-size 规定背景图片的尺寸。

像素表示,background-size:24px 15px;即width=24px,height=15px

百分比表示,如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

background-size:25%;只有x,没有y。相当于一张图片,在x方向上占父元素的4分之一,在y方向上占完父元素(即默认100%),这样背景中有四张横向排列的图片。

background-size:25% 50%;表示x方向上占父元素的四分之一,y方向上占父元素的二分之一,这样背景中共有8张图片,共两行(y 50%),每行四个图片(x 20%)

注意:如果不想重复,则可以使用background-repeat:no-repeat;

(4)CSS3 允许您为元素使用多个背景图像。

实例  为 body 元素设置两幅背景图片:

body {  background-image:url(bg_flower.gif),url(bg_flower_2.gif); }

复习原来的属性:

background-attachment  scroll | fixed — 定义背景图片随滚动轴的移动方式

相对于浏览器视窗来说的,不管这个元素在什么地方,如果它的background-attachment为fixed,则它的背景的位置就与它本身无关了,因为它的背景始终是参照浏览器的可见视窗来定位的。

background-position  center/left/top,  x% y%,  Xpx Ypx

第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值,另一个值将是 50%。

例子:您需要把 background-attachment 属性设置为 “fixed”,才能保证该属性在 Firefox 和 Opera 中正常工作。

body

{

  background-image:url(‘/i/eg_bg_03.gif’);

  background-repeat:no-repeat;

  background-attachment:fixed;

  background-position:center;

}


8 responses on “[css3]知识点积累

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>