今天公司网站上要做一个页面,设计图就有设计到垂直边向里凹陷的很多块,而且这些块高度是不一致,如果直接切图来做背景很不现实,还是得用样式来实现这个效果。下面就来记录一下实现的方法,以便自己以后重用。如果你看到了这篇文章,也希望你能给我一些好的建议。(对于IE只适用于IE9)
源代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>div两垂直边向里凹陷</title>
<style type="text/css">
.testdiv,.testdiv2{
position: relative;
margin: 0 auto;
margin-top: 30px;
width: 200px;
height: 200px;
background: yellow;
text-align: center;
}
.content{
margin: 0 auto;
background: yellow;
width: 150px;
height: 190px;
padding: 5px;
}
.testdiv::before,.testdiv2::before{
position: absolute;
left: -15px;
top: 0;
display: block;
content: '我是前面';
background: #fff;
width: 30px;
height: 100%; /*高度为100%,与父元素相等*/
border-radius: 50%;
}
.testdiv::after,.testdiv2::after{
position: absolute;
left: 185px;
top: 0;
display: block;
content: '我是后面';
background: #fff;
width: 30px;
height: 100%; <span style="font-family: Arial, Helvetica, sans-serif;">/*高度为100%,与父元素相等*/</span>
border-radius: 50%;
}
.testdiv2::before,.testdiv2::after{
background-color: red;
}
</style>
</head>
<body>
<div class="testdiv">
<div class="content">
我是实验框实验框<br />
我是实验框实验框<br />
我是实验框实验框<br />
我是实验框实验框<br />
我是实验框实验框<br />
</div>
</div>
<div class="testdiv2">我是实验框</div>
</body>
</html>
效果:
实现原理:
- css3中的 ::before 和 ::after 选择器在被选元素的内容前面插入内容。
::before 选择器在被选元素的内容前面插入内容
::after 选择器在被选元素的内容后面插入内容.testdiv::before,.testdiv2::before{ position: absolute; left: -15px; top: 0; display: block; content: '我是前面'; background: #fff; width: 30px; height: 100%; border-radius: 50%; }
利用这两个选择器分别在被选中元素的前后插入一个块,利用css调整这两个块的样式,将被选中元素的垂直边遮挡,就形成了如效果图所示的“垂直边向里凹陷的效果”。
注意:
1、被选中的元素的position设置为relative相对定位;
2、插入的元素的position设置为absolute绝对定位。并将其垂直边利用border-radius设置为50%,形成弧形。再利用left调整其位置对被选中元素形成遮挡;