不规则div之<div两垂直边向里凹陷>

来源：互联网发布：加工中心手动编程自学编辑：程序博客网时间：2024/04/28 20:45

今天公司网站上要做一个页面，设计图就有设计到垂直边向里凹陷的很多块，而且这些块高度是不一致，如果直接切图来做背景很不现实，还是得用样式来实现这个效果。下面就来记录一下实现的方法，以便自己以后重用。如果你看到了这篇文章，也希望你能给我一些好的建议。（对于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调整其位置对被选中元素形成遮挡；

0 0