最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

CSS3新增UI样式

CSS3 有客 877浏览 0评论
  • 圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下:

  1. <head>

  2. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

  3. <title>
    无标题文档</title>

  4. <style>
       // 如果是两个数字,则左上角和右下角一样,右上角和左下角一样
  5. .box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}

  6. </style>
  7. </head>
  8. <body>

  9. <div class=”box”></div>

    </body>



  10. <head>

  11. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

  12. <title>
    无标题文档</title>

  13. <style>
  14. // 100px/150px表示每个角的水平和垂直,同时可以前面四个/后面四个,则分别表示四个角的水平和四个角的垂直
  15. .box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}

  16. </style>
  17. </head>
  18. <body>

  19. <div class=”box”></div>

    </body>


  1. 边框背景

    1. <head>

    2. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

    3. <title>
      无标题文档</title>
    4. <style>
    5. .box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:10px;border-right-width:10px;}
    6. </style>
    7. </head>
    8. <body>

    9. <div class=”box”></div>

      </body>


    10. 线性渐变


      <head>


      <meta http-equiv=”Content-Type” content=”textml; charset=utf-8″>


      <title>
      无标题文档</title>

      <style>

      .box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}

      </style>

      </head>

      <body>


      <div class=”box”></div>

      </body>


    11. 可以设置多个背景


      <head>


      <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>


      <title>
      无标题文档</title>


      <style>

      .box{width:300px;height:300px;background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;}


      </style>

      </head>

      <body>


      <div class=”box”></div>

      </body>


    12. border-image:边框图片
    13. border-image-source: 引入图片
    14. border-image-slice: 切割图片
    15. border-image-width: 边框宽度
    16. border-image-repeat: 图片的排列方式(round 平铺, repeat 重复, stretch 拉伸)
    17. border-colors:边框颜色
    18. 背景尺寸: background-size: x, y (100% 100%)
    19. background-origin: border | padding | content -box,分别表示从border区域开始显示背景,从padding区域开始显示背景,从content区域开始显示背景
    20. border-clip : border(border区域向外裁剪背景) padding(padding区域向外裁剪背景)content(content区域向外裁剪背景)
  2. 遮罩

转载请注明:有客帮 » CSS3新增UI样式

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址