source

국경 길이를 제한할 방법이 있습니까?

nicesource 2023. 8. 2. 09:12
반응형

국경 길이를 제한할 방법이 있습니까?

테두리의 길이를 제한할 수 있는 방법이 있습니까?나는 있습니다<div>하단 테두리가 있지만 왼쪽에 테두리를 추가하고 싶습니다.<div>위로 올라가는 길의 절반만 뻗어 있습니다.

페이지에 추가 요소를 추가하지 않고 할 수 있는 방법이 있습니까?

CSS 생성 콘텐츠는 다음과 같은 문제를 해결할 수 있습니다.

div {
  position: relative;
}


/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}
<div>Lorem Ipsum</div>

(참고 - 더content: "";선언은 의사-스캐너가 렌더링하기 위해 필요합니다.)

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}
<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

유사 요소가 바위입니다 :)

조금만 재생하면 크기가 조정된 테두리 요소가 가운데로 나타나거나 옆에 다른 요소가 있는 경우에만 나타나도록 설정할 수 있습니다(메뉴에서처럼).다음은 메뉴의 예입니다.

#menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li::after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}


#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li::after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}
<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

CSS 속성을 사용하면 테두리 두께만 제어할 수 있고 길이는 제어할 수 없습니다.

그러나 우리는 경계 효과를 모방하고 그것을 제어할 수 있습니다.width그리고.height우리가 다른 방법으로 원하는 대로.

CSS(선형 그라데이션) 사용 시:

우리는 사용할 수 있습니다.linear-gradient()배경 이미지를 만들고 CSS로 크기와 위치를 제어하여 테두리처럼 보이도록 합니다.요소에 여러 배경 이미지를 적용할 수 있으므로 이 기능을 사용하여 이미지와 같은 여러 테두리를 만들고 요소의 다른 면에 적용할 수 있습니다.또한 사용 가능한 나머지 영역을 몇 가지 단색, 그라데이션 또는 배경 이미지로 덮을 수 있습니다.

필수 HTML:

우리에게 필요한 것은 하나의 요소(아마도 어느 정도의 클래스)뿐입니다.

<div class="box"></div>

단계:

  1. 다음을 사용하여 배경 이미지 만들기linear-gradient().
  2. 사용하다background-size조정하기 위해width/height경계처럼 보이도록 위에서 생성된 이미지의.
  3. 사용하다background-position위치를 조정하는 것(예:left,right,left bottom위에 생성된 경계의 등).

필요한 CSS:

.box {
  background-image: linear-gradient(purple, purple),
                    // Above css will create background image that looks like a border.
                    linear-gradient(steelblue, steelblue);
                    // This will create background image for the container.

  background-repeat: no-repeat;

  /* First sizing pair (4px 50%) will define the size of the border i.e border
     will be of having 4px width and 50% height. */
  /* 2nd pair will define the size of stretched background image. */
  background-size: 4px 50%, calc(100% - 4px) 100%;

  /* Similar to size, first pair will define the position of the border
     and 2nd one for the container background */
  background-position: left bottom, 4px 0;
}

예:

와 함께linear-gradient()우리는 그라데이션을 가질 뿐만 아니라 단색의 테두리를 만들 수 있습니다.다음은 이 메서드를 사용하여 만든 테두리 예제입니다.

한쪽에만 테두리가 적용된 예:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

양쪽에 테두리가 적용된 예:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

모든 면에 테두리가 적용된 예:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

스크린샷:

Output Image showing half length borders

수평 라인의 경우 hr 태그를 사용할 수 있습니다.

hr { width: 90%; }

그러나 테두리 높이를 제한할 수 없습니다.요소 높이만.

이를 수행하는 또 다른 방법은 선형 그라데이션과 함께 테두리 이미지를 사용하는 것입니다.

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}
<div></div>

jsfiddle: https://jsfiddle.net/u7zq0amc/1/

브라우저 지원: IE: 11+

크롬: 모두

파이어폭스: 15+

더 나은 지원을 위해 공급업체 접두사도 추가합니다.

테두리 이미지를 사용할 수 있습니다.

이것은 CSS 속임수이지, 공식적인 해결책이 아닙니다.코드에 마침표를 검은색으로 표시하는 것은 요소의 위치를 지정하는 데 도움이 되기 때문입니다.그런 다음 내용물(색상: 흰색)과 (마진탑: -5px 정도)에 색을 입혀서 마치 마침표가 없는 것처럼 만듭니다.

div.yourdivname:after {
  content: "";
  border-bottom: 1px solid grey;
  width: 60%;
  display: block;
  margin: 0 auto;
}

이 문제에 대한 기사: https://www.steckinsights.com/shorten-length-border-bottom-pure-css/

경계는 변의 부분이 아닌 변별로만 정의됩니다.그래서, 안돼요, 그러면 안 돼요.

또한, 새로운 요소는 경계가 되지 않을 것이며, 원하는 행동을 모방할 뿐이지만 여전히 요소일 것입니다.

다른 솔루션은 배경 이미지를 사용하여 왼쪽 테두리 모양을 모방할 수 있습니다.

  1. 그래픽으로 필요한 테두리 왼쪽 스타일 만들기
  2. div의 맨 왼쪽에 배치합니다(이전 브라우저의 경우 텍스트 크기가 약 두 번 증가할 정도로 충분히 길도록 합니다).
  3. div 상단에서 수직 위치를 50%로 설정합니다.

IE를 위해 (평소처럼) 조정해야 할 수도 있지만, 만약 당신이 원하는 디자인이라면 시도해 볼 가치가 있습니다.

  • 저는 일반적으로 CSS가 본질적으로 제공하는 것에 이미지를 사용하는 것에 반대하지만, 때때로 디자인이 필요하다면 다른 방법이 없습니다.

한 변당 하나의 테두리만 정의할 수 있습니다.이를 위해 추가 요소를 추가해야 합니다!

언급URL : https://stackoverflow.com/questions/4131490/any-way-to-limit-border-length

반응형

'source' 카테고리의 다른 글

jQuery 페이지 하단/iframe으로 스크롤  (0) 2023.08.02
그런데 c 프로그램의 반환값을 명령줄에서 얻기 위해서입니까?  (0) 2023.08.02
Panda의 샘플 데이터 세트  (0) 2023.07.28
ComponentFactoryResolver로 생성된 구성 요소와 함께 @Input을 사용하는 방법은 무엇입니까?  (0) 2023.07.28
jQuery로 텍스트를 가져올 때 공백을 어떻게 제거합니까?  (0) 2023.07.28

'source'의 다른글

  • 현재글국경 길이를 제한할 방법이 있습니까?

관련글

댓글

티스토리툴바