CSS学习（五）-css圆角边框
2016-03-03 01:16
615 查看
一、理论：
1.border-radius:左上\右上\右下\左下
2.border-radius:圆角水平半径/圆角垂直半径
3.在img上应用border-radius在webkit内核浏览器上不能对图片进行剪切
二、实践：
1.
1.border-radius:左上\右上\右下\左下
2.border-radius:圆角水平半径/圆角垂直半径
3.在img上应用border-radius在webkit内核浏览器上不能对图片进行剪切
二、实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.border-radius{
width:250px;
height:100px;
border:10px solid orange;
border-radius: 10px;
}
.border-radius1{
width:250px;
height:100px;
border:10px solid orange;
border-radius: 10px 50px;
}
.border-radius2{
width:250px;
height:100px;
border:10px solid orange;
border-radius: 10px 20px 30px;
}
.border-radius3{
width:250px;
height:100px;
border:10px solid orange;
border-radius: 10px 20px 30px 50px;
}
.border-radius6{
width:250px;
height:100px;
border:10px solid orange;
border-radius: 10px 20px 30px 50px / 30px 20px 10px 5px;
}
.border-radius7{
width:250px;
height:100px;
border:10px solid orange;
border-top-left-radius: 10px 50px;
border-top-right-radius: 20px 60px;
border-top-left-radius: 20px 60px;
border-top-right-radius: 30px 50px;
}
.border-radius8{
width:250px;
height:100px;
border:10px solid orange;
border-radius: 50px 0 0 0;
}
.border-radius9{
width:250px;
height:100px;
border:10px solid orange;
border-radius: 30px;
}
.border-radius10{
width:250px;
height:100px;
border:30px solid orange;
border-radius: 35px;
}
.border-radius11{
width: 350px;
height: 100px;
border:30px solid orange;
border-color: 35px 35px 60px 30px;
border-color: orange red green blue;
border-radius: 80px;
}
</style>
</head>
<body>
<div class = "border-radius" ></div>
<div class = "border-radius1" ></div>
<div class = "border-radius2" ></div>
<div class = "border-radius3" ></div>
<div class = "border-radius6" ></div>
<div class = "border-radius7" ></div>
<div class = "border-radius8" ></div>
<div class = "border-radius9" ></div>
<div class = "border-radius10" ></div>
<div class = "border-radius11" ></div>
</body>
</html>2.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
img{
border:5px solid red;
border-radius: 10px;
}
</style>
</head>
<body>
<img src = "images/border-radius.jpg" width="132" height="150" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 