CSS3新增UI样式

时间：2015-10-12 10:44:21 阅读：226 评论：0 收藏：0 [点我收藏+]

标签：

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
　　    // 如果是两个数字，则左上角和右下角一样，右上角和左下角一样
        .box{width: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{width: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{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>

线性渐变

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

可以设置多个背景

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

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区域向外裁剪背景)

遮罩

CSS3新增UI样式

标签：

原文地址：http://www.cnblogs.com/donghualei/p/4870818.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行