CSS3新增UI样式_html/css_WEB-ITnose

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

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

登录后复制

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

立即学习“前端免费学习笔记（深入）”；

边框背景

        .box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:10px;border-right-width:10px;}

登录后复制

立即学习“前端免费学习笔记（深入）”；

线性渐变

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

登录后复制

立即学习“前端免费学习笔记（深入）”；

可以设置多个背景

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

登录后复制

立即学习“前端免费学习笔记（深入）”；

border-image:边框图片 border-image-source: 引入图片 border-image-slice: 切割图片 border-image-width: 边框宽度 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区域向外裁剪背景)   遮罩