zoukankan      html  css  js  c++  java
  • CSS3边框

      现在最新版的浏览器基本都支持css3 基本都不用写前缀 ,写前缀是为了向前兼容老版本的浏览器而已

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

        前缀是-moz-的Firefox支持

        前缀是-o-的Opera支持

        前缀是-ms-的IE支持

       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- 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)

     

         

  • 相关阅读:
    生成Ptc文件时候使用top camera比较好
    3delight 上关于ptex的讨论,3delight的开发者最后说ptex的内存表现并不比普通的贴图差,不知道是不是因为3delight不支持而故意说的
    闲来无事,写个算法关于11000放在含有1001个元素。。。
    寻最优数字筛选算法找出 “排列数列“ 对应的 “组合数列“
    入住博客园
    日常工作中收集整理的MSSQL 技巧
    序列化 和 反序列化 类
    对Singleton Pattern的一点修改
    快速幂 & 取余运算 讲解
    JDK动态代理实现
  • 原文地址:https://www.cnblogs.com/wuyongyu/p/5211275.html
Copyright © 2011-2022 走看看