상자에 크기 / 부분 테두리를 선언하는 방법은 무엇입니까?

104

CSS의 상자에 크기 / 부분 테두리를 선언하는 방법이 있습니까? 예를 들어 그 상자 350px는 처음에 border-bottom 만 표시합니다 60px. 매우 유용 할 것 같습니다.

예 :

여기에 이미지 설명 입력 여기에 이미지 설명 입력

css  border 
— Davidmatas
소스

답변:

154

별로. 그러나 우아하게 저하되고 불필요한 마크 업이 필요하지 않은 방식으로 효과를 얻는 것은 매우 쉽습니다.

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}
<div></div>
스 니펫 확장

— 책장
소스
3
+1하지 않고 정답으로 표시되는 것과 같은 것은 없습니다. 하지만 나는 당신을 +1했습니다! 이것은 내 문제에 대한 완벽한 해결책이었습니다. 감사! 편집 나는 당신이 OP가 될 수 있고 다른 누군가에 의해 -1 될 수 있다고 생각합니다. 오 잘. 나는 당신의 대답을 주셔서 감사합니다, 그것은 모든 문제 ;-), 맞아
— CWSpear
7
그의 두 번째 예에서와 같이 어떻게 이것이 중앙에 오도록합니까?
— Cameron Martin
부모 요소가 유동 폭 인라인 블록 요소 일 때 추가해야합니다. 분명히 고정 너비 일 때 쉽습니다.
— Cameron Martin
4
신경 쓰지 마세요, 원하는 효과를 얻었습니다 -dabblet.com/gist/e5a78f2d4bf50b6be4d3 . 부끄러운 ::outside일과 ::inside의사 요소는 아직 사용할 수 없습니다. 스타일링을 위해 마크 업을 넣는 것이 싫지만 다른 방법은 없다고 생각합니다.
— Cameron Martin
작동합니다! React와 함께 사용하려면 contentin :after을 인라인 스타일이나 JSS로 사용할 수 없지만 스타일이 지정된 구성 요소를 사용하면 잘 작동합니다.
— Raphael Pinel 19.11.
23

이미 해결되었으며 픽셀이 요청되었습니다. 하지만 뭔가를 공유하고 싶었습니다 ...

부분적으로 밑줄이 그어진 텍스트 요소는 display:table또는 사용하여 쉽게 얻을 수 있습니다.display:inline-block

( display:inline-block어색한 4px간격 때문에 사용하지 않습니다 .)

텍스트 요소

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>
스 니펫 확장

센터링 을 display:table사용하면 요소를 text-align:center.
함께 일합시다 margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
스 니펫 확장

글쎄 , 그건 좋지만 부분적으로 는 아니야 . 책장이 이미 소개 된
것처럼 가상 요소는 금의 가치가 있습니다.

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>
스 니펫 확장

Offset , 밑줄은 지금 왼쪽 정렬됩니다. 중앙에 배치하려면 의사 요소 width( 50% / 2 = 25%) 의 절반을 오른쪽으로 밀어 넣으십시오 .

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  margin-left: 25%;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>
스 니펫 확장

... davidmatas가 말했듯이 , 사용 margin:auto은 때때로 계산하는 것보다 더 실용적입니다.margin 이 손으로 오프셋을 입니다.

따라서 width다음 조합 중 하나를 사용하여 밑줄을 왼쪽, 오른쪽 또는 가운데 (현재를 알지 못함 )에 맞출 수 있습니다 .

  • 왼쪽 : margin-right: auto (또는 그냥 놔둬)
  • 중간 :margin: auto
  • 오른쪽 :margin-left: auto

전체 예

.underline {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.underline:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}

.underline--left:after {
  margin-right: auto; /* ...or just leave it off */
}

.underline--center:after {
  margin-left: auto;
  margin-right: auto;
}

.underline--right:after {
  margin-left: auto
}
<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>
스 니펫 확장

블록 수준 요소

이것은 쉽게 채택 할 수 있으므로 블록 수준 요소를 사용할 수 있습니다. 트릭은 가상 요소 높이를 실제 요소 와 동일한 높이로 설정하는 것입니다 (단순히 height:100%).

div {
  background-color: #eee;
  display: table;
  height: 100px;
  width: 350px;
}
div:after {
  border-bottom: 3px solid #666;
  content: '';
  display: block;
  height: 100%;
  width: 60px;
}
<div></div>
스 니펫 확장

— yckart
소스
2
좋은 대답입니다. 을 위해 :after더 많은처럼 나는 margin: 0 auto대신에 방법 margin-left: 25%당신이 수학을 할 필요없이 선언있는 폭이 작동하기 때문이다.
— davidmatas
1
@davidmatas 좋은 지적! 수학적 방법 을 사용하여 수동으로 수동으로 배치하는 방법 을 명확히했습니다. 이 예제를 통해 누구나 왼쪽 / 중앙 / 오른쪽 정렬 방법을 이해할 수 있습니다. 어쨌든, 나는 auto- 단순화 를 추가 할 것입니다 :)
— yckart
16

linear-gradient원하는 모든 종류의 선을 쉽게 만들 수있는 위치에 의존하는 또 다른 솔루션이 있습니다. 여러 배경을 사용하여 여러 줄 (예 : 각면에)을 가질 수도 있습니다.

코드 스 니펫 표시

다음은 위와 동일한 것을 달성하는 또 다른 구문입니다.

.box1 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(#000, #000) top /40% 3px no-repeat, 
   #ccc
}

.box2 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(red,red) bottom/ 60% 2px no-repeat, 
    #ccc;
}

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(red , red)bottom left/ 60% 2px,
   linear-gradient(blue, blue) 60% 0 / 40% 2px,
   linear-gradient(brown, brown) left/ 3px 30%,
   linear-gradient(orange, orange) right / 3px 40%,
   #ccc;
  background-repeat:no-repeat;
}
<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>
스 니펫 확장

— 테마 니 아 피프
소스
1
와우 .. "묵시적"상자의 왼쪽 상단과 오른쪽 상단 모서리 만 표시하는 방법을 찾기 위해 몇 시간 동안 노력했습니다. : before 및 : after가 너무 제한되어 개체의 위치가 잘못되었습니다. 이것은 훌륭한 솔루션입니다!
— Wouter
이것이 작동하는 이유와 방법에 대한 배경 정보 : webfx.com/blog/web-design/background-css-shorthand
— Wouter
2

그리드를 사용하여 일부 테두리를 그렸습니다.

를 참조하십시오 여기 .

암호:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive partial borders</title>
    <style>
        /* ungrid without mobile */
        .row{width:100%;display:table;table-layout:fixed;}
        .col{display:table-cell;}

        /* things to change */
        .row{width: 70%; margin: auto;}
        .mid.row > .col{ height: 150px; }

        /* draw box and align text */
        .col{ text-align: center;}
        .top.left.col{
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .top.right.col{
            border-top: 1px solid black;
            border-right: 1px solid black;
        }
        .bottom.left.col{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }
        .bottom.right.col{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
        }
        .mid.row > .col{
            border-left: 1px solid black;
            border-right: 1px solid black;
            vertical-align: middle;
        }
        .top.center.col{
            position: relative;
            top: -0.5em;
        }
        .bottom.center.col{
            position: relative;
            bottom: -0.5em;
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="top left col"></div>
        <div class="top center col">Top</div>
        <div class="top right col"></div>
    </div>
    <div class="mid row">
        <div class="col">Mid</div>
    </div>
    <div class="row">
        <div class="bottom left col"></div>
        <div class="bottom center col">Bottom</div>
        <div class="bottom right col"></div>
    </div>  

</body>
</html>
— 사이트
소스
@ SverriM.Olsen 사람이 코드를 편집 한 이후로 주석은 쓸모가 없습니다
— Sagar V
0

CSS는 부분 테두리를 지원하지 않습니다. 이를 시뮬레이션하려면 인접한 요소를 사용해야합니다.

— Diodeus-James MacFarlane
소스
또는 위의 답변에 설명 된대로 CSS로 전적으로 할 수 있고 마크 업을 추가하지 않는 의사 요소
— OG Sean
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.