html - 如何在 CSS 中向导航栏添加自定义行

标签 html css

目前正在尝试添加一个很酷的设计线,例如

http://forrester-park.co.uk/wp-content/uploads/2014/05/Fancy-line.png

到我的自定义导航栏的底部。怎么会添加这样的东西?是否可以将其添加到导航栏的 css 中而不是将其作为图像拉入?类似于 http://jsfiddle.net/henry12345/6h3Lee0e/

主要是这里:

width:auto
border-top:1 px solid #000000;
border-radius:3px;

最佳答案

你可以做类似的事情

background:url('image_url');
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 10px;
margin:  10px 0px  10px 0px;

或使用边框图像(http://caniuse.com/#feat=border-image IE 可能是一个问题),如果您可以提供您的 html/STLes in fiddle - 可以提出解决方案

关于html - 如何在 CSS 中向导航栏添加自定义行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31855545/

相关文章:

html - 表格单元格正好是高度的 50% 和宽度的 50%

html - 悬停标题文本和背景的 native /默认颜色

javascript - 单击同一 div 内的按钮时关闭 div

css - 垂直对齐 CSS :before and :after content

html - 样式化 Bootstrap 下拉菜单

android - 如何从 Android 中的 EditText 中提取 HTML 样式的文本?

html - 创建具有两种不同颜色的页脚

html - ie 7 中的相对定位、div 堆叠问题

javascript - 纯 CSS 方法在显示 :table element? 内保持图像比例

html - 从 Photoshop 到 html 的背景