码迷,mamicode.com
首页 > Web开发 > 详细

css3笔记

时间:2016-07-18 13:04:06      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

前缀是-webkit-的Safari和Chrome支持

前缀是-moz-的Firefox支持

前缀是-o-的Opera支持

   CSS3边框

  border-radius (CSS3圆角)

border-radius: 2em  /  2em 1em 4em  /  1em 3em;

is equivalent to:

border-top-left-radius: 2em  /  2em   /  1em;
border-top-right-radius: 2em  /  1em  /  3em;
border-bottom-right-radius: 2em  /  4em  /  1em;
border-bottom-left-radius: 2em  /  1em  /  3em;

    注意:每个半径的四个值的顺序是:左上角,右上角,右下角,左下角

  box-shadow (CSS3盒阴影)

border-shadow: 10px(h-shadow)  10px(v-shadow)  5px(blur)  #888(color)

the grammar is:

box-shadow: h-shadow v-shadow blur spread color inset;

  h-shadow : 必须的。水平阴影的位置。允许负值

  v-shadow : 必须的。垂直阴影的位置。允许负值

    blur : 可选。模糊距离

  spread : 可选。阴影的颜色

    inset : 可选。从外层的阴影(开始时)改变阴影内侧阴影


  border-image(CSS3边界图片)

-moz-border-image: url("border.png") 30 30 round;  /*Firefox*/
-webkit-border-image: url("border.png") 30 30 round;  /*Safari 和 Chrome*/
-o-border-image: url("border.png") 30 30 round;   /*Opera*/
border-image: url("border.png") 30 30 round;

the grammer is :

border-image:source slice width outset repet;

border-image-source: none | image;        [url("border.png")]
border-slice: number | % | fill;          [30 30]
border-width: number | % | auto;          [initial]   
border-image-outset: length | number;     [initial]
border-image-repeat: stretch | repeat | round | initial | inherit;   [round]

 

  border-image-source : 用于指定要用于绘制边框的图像的位置

    border-image-slice : 图像边界内偏移

  border-image-width : 图像边界的宽度

  border-image-outset : 用于指定在边框外部绘制 border-image-area 的量

  border-image-repeat : 用于图像边界是否拉伸(stretch)、重复(repeat)、铺满(round)、默认值(initial)或者继承(inherit)

 

 

     

css3笔记

标签:

原文地址:http://www.cnblogs.com/wuyongyu/p/5211275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!