css 每天一练之一个标签实现三行菜单样式

效果图

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

参考：w3school.background-clip

欢迎访问我的博客，同步发布
感谢阅读，如有错误欢迎指正。