滑动门以及圆角边框的多种实现方式——2018-02-02
2018-02-02 本文已影响0人
不2青年
一、CSS3实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3实现</title>
<style>
body{
background: grey;
}
.box{
margin: 30px auto;
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 20px;/* CSS3实现 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
缺点：IE6下不兼容CSS3
二、三层嵌套实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三层嵌套实现</title>
<style>
.box{
width: 200px;
margin: 30px auto;
}
.boxHead{
background: url('img2/boxH.png') repeat-x;
height: 9px;
overflow: hidden;
}
.HeadL{
background: url('img2/boxHL.png') no-repeat;
}
.HeadR{
background: url('img2/boxHR.png') no-repeat right 0;
height: 9px;
}
.center{
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
}
.footerHead{
background: url('img2/boxF.png') repeat-x;
height: 9px;
overflow: hidden;
}
.footerL{
background: url('img2/boxFL.png') no-repeat;
}
.footerR{
background: url('img2/boxFR.png') no-repeat right 0;
height: 9px;
}
</style>
</head>
<body>
<div class="box">
<div class="boxHead">
<div class="HeadL">
<div class="HeadR"></div>
</div>
</div>
<div class="center">
内容内容内容内容内容<br/>
内容内容内容内容内容<br/>
内容内容内容内容内容<br/>
内容内容内容内容内容<br/>
内容内容内容内容内容<br/>
</div>
<div class="footerHead">
<div class="footerL">
<div class="footerR"></div>
</div>
</div>
</div>
</body>
</html>
效果图：
三层嵌套实现.png
缺点：边框圆角不透明。
三、三层嵌套加定位实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三层嵌套加定位实现</title>
<style>
body{
background: grey;
}
.box{
width: 82px;
margin: 30px auto;
background: url('img3/btn.gif') repeat-x;
}
.boxL{
background: url('img3/btnL.gif') no-repeat;
position: relative;
left: -9px;
}
.boxR{
background: url('img3/btnR.gif') no-repeat right 0;
height: 30px;
position: relative;
right: -18px;
}
</style>
</head>
<body>
<div class="box">
<div class="boxL">
<div class="boxR"></div>
</div>
</div>
</body>
</html>
效果图：
圆角透明.png
四、三层嵌套加margin实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三层嵌套加margin实现</title>
<style>
body{
background: grey;
}
.boxL{
width: 100px;
margin: 30px auto;
background: url('img3/btnL.gif') no-repeat;
}
.boxR{
background: url('img3/btnR.gif') no-repeat right 0;
}
.box{
height: 30px;
background: url('img3/btn.gif') repeat-x;
margin: 0 9px;
}
</style>
</head>
<body>
<div class="boxL">
<div class="boxR">
<div class="box"></div>
</div>
</div>
</body>
</html>
效果图：
圆角透明.png
总结：
一般拓展性强的用三层嵌套实现，拓展性不强的用两层嵌套实现，无拓展性的直接用确定像素的背景实现。
