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