CSS 삽입 테두리

CSS 삽입 테두리

---

CSS 테두리에 대한 간단한 질문이 있습니다.

단색 인세 트 테두리를 만들어야합니다. 이것은 내가 사용하는 CSS의 비트입니다.

border: 10px inset rgba(51,153,0,0.65);

불행히도 3D 융기 테두리를 만듭니다 (정사각형 및 어두운 설명 상자 무시).

http://dl.dropbox.com/u/12147973/border-current.jpg

이것이 목표입니다.

http://dl.dropbox.com/u/12147973/border-boal.jpg

어떤 아이디어?

---

다음과 같이 사용할 수 있습니다 box-shadow.

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 10px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 10px #0f0;
}

<div id="something"></div>

이것은의 배경 이미지를 오버레이한다는 장점이 div있지만, 물론 흐려집니다 ( box-shadow속성 에서 예상 한대로 ). density그림자 를 만들려면 물론 추가 그림자를 추가 할 수 있습니다.

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

<div id="something"></div>

---

편집 내가 바보 야 실현하고 간단한 솔루션을 제공하는 것을 잊었다 때문에 첫째 되는 배경 위에 테두리를 적용 할 그렇지 않으면 빈 자식 요소를 사용하고 있습니다 :

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  padding: 0;
  position: relative;
}
#something div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(0, 255, 0, 0.6);
}

<div id="something">
  <div></div>
</div>

---

아래 @CoryDanielson의 의견 후에 편집 :

jsfiddle.net/dPcDu/2에 대해 4 번째 px 매개 변수를 추가 box-shadow하여 스프레드를 수행하고 그의 이미지를 더 쉽게 반영 할 수 있습니다.

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}

<div id="something"></div>

---

나는 box-sizing.

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#bar{
  border: 10px solid green;
  }

---

요소 내에서 테두리 삽입을 생성하려면 내가 찾은 유일한 해결책 (이 스레드의 모든 제안을 아무 소용이없는 것으로 시도 했음)은 다음과 같은 의사 요소를 사용하는 것입니다.

예

.has-inset-border:before {
  content: "foo"; /* you need something or it will be invisible at least on Chrome */
  color: transparent;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border: 4px dashed red;
}

테두리가 항상 모든 외부에서 끝나기 때문에 box-sizing 속성이 작동하지 않습니다.

박스 섀도우 옵션은 실제로 작동하지 않고 널리 지원되지 않는다는 두 가지 단점이 있습니다 (원한다면 렌더링하는 데 더 많은 CPU주기가 필요함).

---

이것은 오래된 트릭이지만 여전히 가장 쉬운 방법은 음수 값으로 outline-offset을 사용하는 것입니다 (아래 예제에서는 -6px 사용). 여기에 바이올린 이 있습니다. 두 가지를 구분하기 위해 바깥 쪽 테두리를 빨간색과 윤곽선을 흰색으로 만들었습니다.

.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}

<div class="outline-offset"></div>

---

테두리가 요소 내부에 있는지 확인하려면 다음을 사용할 수 있습니다.

box-sizing:border-box;

그러면 요소 내부에 다음 테두리가 배치됩니다.

border: 10px solid black;

(비슷한 결과 inset는 box-shadow 에서 추가 매개 변수 를 사용하여 얻을 수 있지만, 대신 이것은 실제 테두리에 대한 것이며 여전히 다른 것에 그림자를 사용할 수 있습니다.)

위의 또 다른 대답 참고 : 당신이 하나를 사용하여 즉시 inset에 box-shadow특정 요소의 해당 요소 2 상자 - 그림자의 최대 제한되고 더 그림자를위한 래퍼 DIV 필요합니다.

두 솔루션 모두 원치 않는 3D 효과를 제거해야합니다. 또한 두 솔루션 모두 스택 가능합니다 (2018 년에 추가 한 예제 참조).

.example-border {
  width:100px;
  height:100px;
  border:40px solid blue;
  box-sizing:border-box;
  float:left;
}

.example-shadow {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  box-shadow:0 0 0 40px green inset;
}

.example-combined {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  border:20px solid orange;
  box-sizing:border-box;
  box-shadow:0 0 0 20px red inset;
}

<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>

---

당신이 무엇과 비교하는지 모르겠습니다.

하지만 슈퍼 간단한 방법이 아닌 다른 경계 항목에 비해 테두리 모양의 삽입을하는 것은 추가하는 것입니다 border: ?px solid transparent;무엇 이건 항목에 없는 테두리가.

테두리가있는 항목이 삽입 된 것처럼 보입니다.

http://jsfiddle.net/cmunns/cgrtd/

---

box-sizing옵션이 아닌 경우 이를 수행하는 또 다른 방법은 크기가 지정된 요소의 자식으로 만드는 것입니다.

데모

CSS

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
}
.border {
  border: 1px solid;
  display: block;
}
.medium { border-width: 10px; }
.large  { border-width: 25px; }

HTML

<div class="box">
  <div class="border small">A</div>
</div>
<div class="box">
  <div class="border medium">B</div>
</div>
<div class="box">
  <div class="border large">C</div>
</div>

---

background-clip : border-box;

Example:

.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}

<div class="example">Example with background-clip: border-box;</div>

---

So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:

#top-menu .menu-item a:hover {
    border-bottom:4px solid #ec1c24;
    padding-bottom:14px !important;
}
#top-menu .menu-item a {
    padding-bottom:18px !important;
}

I hope this will help someone out there.

---

Simple SCSS solution with pseudo-elements

Live demo: https://codepen.io/vlasterx/pen/xaMgag

// Change border size here
$border-width: 5px;

.element-with-border {
	display: flex;
	height: 100px;
	width: 100%;
	position: relative;
	background-color: #f2f2f2;
	box-sizing: border-box;
	
	// Use pseudo-element to create inset border
	&:before {
		position: absolute;
		content: ' ';
		display: flex;
		border: $border-width solid black;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: $border-width solid black;
		// Important: We must deduct border size from width and height
		width: calc(100% - $border-width); 
		height: calc(100% - $border-width);
	}
}

<div class="element-with-border">
  Lorem ipsum dolor sit amet
</div>

---

You can do this:

.thing {
  border: 2px solid transparent;
}
.thing:hover {
  border: 2px solid green;
}

---

I know this is three years old, but thought it might be helpful to someone.

The concept is to use the :after (or :before) selector to position a border within the parent element.

    .container{
        position:relative; /*Position must be set to something*/
    }

    .container:after{
        position:relative;
        top: 0;
        content:"";
        left:0;
        height: 100%; /*Set pixel height and width if not defined in parent element*/
        width: 100%; 

        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;

        border:1px solid #000; /*set your border style*/

    }

참고URL : https://stackoverflow.com/questions/8452739/css-inset-borders