하나의 테두리에만 윤곽선

인세 트 테두리 를 HTML 요소 에 적용하는 방법 ( 한쪽에 만 적용). 지금까지 저는 이미지 (GIF / PNG)를 사용하여 배경으로 사용하고 늘이고 (반복 -x) 블록 상단에서 약간 떨어진 위치에 배치했습니다. 최근에 저는 outline CSS 속성을 발견했습니다 . 그러나 전체 블록을 동그라미로하는 것 같습니다 ...이 윤곽선 속성을 사용하여 하나의 테두리에서만 수행 할 수 있습니까? 또한 그렇지 않은 경우 배경 이미지를 대체 할 수있는 CSS 트릭이 있습니까? (나중에 CSS 등을 사용하여 윤곽선의 색상을 개인화 할 수 있도록). 미리 감사드립니다!

다음은 달성하려는 이미지입니다. http://exiledesigns.com/stack.jpg

개요는 실제로 전체 요소에 적용됩니다 .

이제 이미지를 보았으므로이를 달성하는 방법은 다음과 같습니다.

.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>

(또는 외부 데모를 참조하십시오 . )

모든 크기와 색상은 자리 표시 자일 뿐이며 원하는 결과와 정확히 일치하도록 변경할 수 있습니다.

중요 참고 사항 : .element에 display:block;(div의 기본값)이 있어야 작동합니다. 그렇지 않은 경우 특정 답변을 자세히 설명 할 수 있도록 전체 코드를 제공해주세요.

box-shadow한쪽에 윤곽선을 만드는 데 사용할 수 있습니다 . 마찬가지로 outline, box-shadow박스 모델의 크기를 변경하지 않습니다.

이것은 맨 위에 줄을 놓습니다.

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

실제로 확인할 수 있는 jsFiddle을 만들었습니다 .

삽입

를 들어 삽입 된 테두리 사용 삽입 된 키워드를. 이렇게하면 맨 위에 삽입 된 선이 표시됩니다.

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

쉼표로 구분 된 문을 사용하여 여러 줄을 추가 할 수 있습니다. 이렇게하면 상단과 왼쪽에 인세 트 라인이 표시됩니다.

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

box-shadow작동 방식 에 대한 자세한 내용 은 MDN 페이지를 확인 하세요 .

Shadow (Like border) + Border로 시도

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

나는 이것이 오래된 것을 압니다. 하지만 그래. Giona 대답보다 훨씬 짧은 솔루션을 선호합니다.

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

나는 내 입력 필드에 테두리를 지정하고, 포커스에서 윤곽선을 제거하고, 대신 테두리를 "윤곽선"으로 지정하고 싶습니다.

input {
  border: 1px solid grey;

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

투명한 테두리로 할 수도 있습니다.

input {
  border: 1px solid transparent;

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

HTML / CSS의 장점은 일반적으로 동일한 효과를 얻을 수있는 방법이 여러 가지라는 것입니다. 다음은 원하는 작업을 수행하는 또 다른 솔루션입니다.

<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/

한쪽 만 outline작동하지 않습니다.border-left/right/top/bottom

내가 제대로 당신의 코멘트를 받고 있다면