效果图
html结构
<div class="menu"></div>
css样式
.menu{
width: 150px;
height: 50px;
padding: 50px 0;
border-top: 50px solid #ccc;
border-bottom: 50px solid #ccc;
background-color: #ccc;
background-clip: content-box;
margin: 10px auto;
}
这里主要是css3的background-clip属性的使用，使用border作出上下两条线，然后用padding挤出空白间距，使用background-clip的content-box填充内容部分，就完成了以上。
background-clip的一共有三个值，分别是border-box,padding-content,content-box
border-box背景被裁剪到边框盒。
border-box
padding-box背景被裁剪到内边距框。
padding-box
content-box背景被裁剪到内容框。
content-box
欢迎访问我的博客，同步发布
感谢阅读，如有错误欢迎指正。
网友评论