css新增UI样式

1、圆角

border-radius

<style>
.box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px; /*椭圆   x/y: x轴半径/y轴半径*/}
</style>
</head>
<body>
<div class="box"></div>
</body>
<style>
.box{width:200px;height:300px;border:1px solid #000;border-radius:50%;}
</style>
</head>
<body>
<div class="box"></div>
</body>
<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px 80px/10px 20px 30px 40px; /*斜杠前为x轴半径，斜杠后为y轴半径*/} 
</style>
</head>
<body>
<div class="box"></div>
</body>

2、风车例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:400px;height:400px;margin:50px auto; transition:5s linear;}
.box div{width:180px;height:180px;margin:10px;border:1px solid #000; box-sizing:border-box;float:left;background:pink;}
.box div:nth-child(1),.box div:nth-child(4){ border-radius:0 70%;}
.box div:nth-child(2),.box div:nth-child(3){ border-radius:70% 0;}
.box:hover{ -webkit-transform:rotate(720deg);}
</style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

3、边框背景：

边框图片 border-image
•border-image-sourceg 引入图片
•border-image-slice 切割图片
•border-image-width 边框宽度
•border-image-repeat 图片的排列方式
round 平铺,repeat 重复,stretch拉伸
边框颜色 border-colors
 
posted @ 2014-04-21 18:05  远方的远方  阅读(221)  评论(0)  编辑  收藏  举报