css新增属性

圆角，border-radius: 1-4个数字/1-4个数字，前面是水平，后面是垂直，不给“/”表示水平和垂直一样，举例如下：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
　　    // 如果是两个数字，则左上角和右下角一样，右上角和左下角一样
        .box{200px;height:200px;border:1px solid #000; border-radius:20px;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>

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

边框背景

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

线性渐变

<head>
    <meta http-equiv="Content-Type" content="textml; charset=utf-8">
    <title>无标题文档</title>
<style>
    .box{300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}
</style>
</head>
<body>
    <div class="box"></div>
</body>

可以设置多个背景

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        .box{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>

border-image:边框图片
border-image-source: 引入图片
border-image-slice: 切割图片
border-image- 边框宽度
border-image-repeat: 图片的排列方式（round 平铺， repeat 重复， stretch 拉伸）
border-colors：边框颜色
背景尺寸： background-size: x, y (100% 100%)
background-origin: border | padding | content -box，分别表示从border区域开始显示背景，从padding区域开始显示背景，从content区域开始显示背景
border-clip : border(从border区域向外裁剪背景)， padding(从padding区域向外裁剪背景)，content(从content区域向外裁剪背景)

遮罩