首页 > web前端 > html教程 > CSS3新增UI样式_html/css_WEB-ITnose

CSS3新增UI样式_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:35:34
原创
1139 人浏览过

  1. 圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下:
  2. <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>无标题文档</title>    <style><br />      // 如果是两个数字,则左上角和右下角一样,右上角和左下角一样        .box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}    </style></head><body>    <div class="box"></div></body>
    登录后复制

  3. <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>无标题文档</title>    <style>        // 100px/150px表示每个角的水平和垂直,同时可以前面四个/后面四个,则分别表示四个角的水平和四个角的垂直        .box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}    </style></head><body>    <div class="box"></div></body>
    登录后复制

  4. 边框背景
  5. <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>无标题文档</title><style>    .box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:10px;border-right-width:10px;}</style></head><body>    <div class="box"></div></body>
    登录后复制

  6. 线性渐变

    <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>
    登录后复制

  7. 可以设置多个背景

    <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>
    登录后复制

     

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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板