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

css 每天一练之一个标签实现三行菜单样式_第1张图片
效果图

html结构


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-clipcontent-box填充内容部分,就完成了以上。

background-clip的一共有三个值,分别是border-box,padding-content,content-box

border-box 背景被裁剪到边框盒。

css 每天一练之一个标签实现三行菜单样式_第2张图片
border-box

padding-box 背景被裁剪到内边距框。

css 每天一练之一个标签实现三行菜单样式_第3张图片
padding-box

content-box 背景被裁剪到内容框。

css 每天一练之一个标签实现三行菜单样式_第4张图片
content-box

参考:w3school.background-clip

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

你可能感兴趣的:(css 每天一练之一个标签实现三行菜单样式)