只在一个边界上勾画出轮廓

如何将 插入边框应用到 HTML 元素中，但只应用于其一侧。 到目前为止，我一直在使用一个图像(GIF/PNG)来做这件事，然后我会使用它作为背景，拉伸它(repeat-x)并从块的顶部定位一点。 最近，我发现了 大纲的 CSS 属性，这是伟大的! 但似乎是整个块..。 是否有可能只在一个边框上使用这个大纲属性？ 另外，如果没有，你有任何 CSS 技巧，可以取代背景图像？(这样我可以个性化的颜色轮廓稍后使用 CSS 等)。 先谢谢你！

下面是我正在努力实现的目标: Http://exiledesigns.com/stack.jpg

195491 次浏览
小开

only one side outline wont work you can use the border-left/right/top/bottom

if i an getting properly your comment

enter image description here

小开
最佳答案

Outline indeed does apply to the whole element.

Now that I see your image, here's how to achieve it.

.element {
padding: 5px 0;
background: #CCC;
}
.element:before {
content: "\a0";
display: block;
padding: 2px 0;
line-height: 1px;
border-top: 1px dashed #000;
}
.element p {
padding: 0 10px;
}
<div class="element">
<p>Some content comes here...</p>
</div>

(Or see external demo.)

All sizes and colors are just placeholders, you can change it to match the exact desired result.

Important note: .element must have display:block; (default for a div) for this to work. If it's not the case, please provide your full code, so that i can elaborate a specific answer.

小开

You can use box-shadow to create an outline on one side. Like outline, box-shadow does not change the size of the box model.

This puts a line on top:

box-shadow: 0 -1px 0 #000;

I made a jsFiddle where you can check it out in action.

The syntax is box-shadow: offset-x | offset-y | blur-radius | color

INSET

For an inset border, use the inset keyword. This puts an inset line on top:

box-shadow: 0 1px 0 #000 inset;

Multiple lines can be added using comma-separated statements. This puts an inset line on the top and the left:

box-shadow: 0 1px 0 #000 inset,
1px 0 0 #000 inset;

For more details on how box-shadow works, check out the MDN page.

小开

Try with Shadow( Like border ) + Border 

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;
小开

The great thing about HTML/CSS is that there's usually more than one way to achieve the same effect. Here's another solution that does what you want:

<nav id="menu1">
<ul>
<li><a href="#">Menu Link 1</a></li>
<li><a href="#">Menu Link 2</a></li>
</ul>
</nav>


nav {
background:#666;
margin:1em;
padding:.5em 0;
}
nav ul {
border-top:1px dashed #fff;
list-style:none;
padding:.5em;
}
nav ul li {
display:inline-block;
}
nav ul li a {
color:#fff;
}

http://jsfiddle.net/10basetom/uCX3G/1/

小开

I know this is old. But yeah. I prefer much shorter solution, than Giona answer

[contenteditable] {
border-bottom: 1px solid transparent;
&:focus {outline: none; border-bottom: 1px dashed #000;}
}
小开

I like to give my input field a border, remove the outline on focus, and "outline" the border instead:

input {
border: 1px solid grey;


&:focus {
outline: none;
border-left: 1px solid violet;
}
}

You can also do it with a transparent border:

input {
border: 1px solid transparent;


&:focus {
outline: none;
border-left: 1px solid violet;
}
}
小开

I have another great solution, maybe it will be useful for someone

.button {
border-bottom: 2px solid transparent;
}
.button:hover {
border-color: #000000;
}


提交答案