테두리 길이를 제한하는 방법이 있습니까?
답변:
도움이 되었기를 바랍니다:
#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>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: "";의사 요소를 렌더링 하려면 선언이 필요합니다)
:after바위 :)
조금만 연주하면 크기가 조정 된 테두리 요소가 가운데에 나타나도록하거나 메뉴 옆에 다른 요소가있는 경우에만 표시되도록 설정할 수도 있습니다. 메뉴가있는 예는 다음과 같습니다.
#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;
}CSS 속성을 사용하면 테두리의 두께 만 제어 할 수 있습니다. 길이가 아닙니다.
그러나 우리는 모방 테두리 효과를 수하고 제어 width하고 height우리가 다른 방법으로 원하는대로.
CSS (선형 그래디언트) 사용시 :
linear-gradient()테두리 이미지처럼 보이도록 배경 이미지를 만들고 CSS로 크기와 위치를 제어하는 데 사용할 수 있습니다 . 요소에 여러 배경 이미지를 적용 할 수 있으므로이 기능을 사용하여 이미지와 같은 여러 테두리를 만들고 요소의 다른면에 적용 할 수 있습니다. 사용 가능한 나머지 영역을 단색, 그라디언트 또는 배경 이미지로 덮을 수도 있습니다.
필수 HTML :
우리에게 필요한 것은 하나의 요소 일뿐입니다.
<div class="box"></div>단계 :
- 로 배경 이미지를 만듭니다
linear-gradient(). - 테두리처럼 보이도록 위에서 만든 이미지
background-size의width/ 를 조정하는 데 사용 합니다height. - 사용
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()우리는 단색의 경계뿐만 아니라 가진 그라디언트를 만들 수 있습니다. 아래는이 방법으로 만든 테두리의 예입니다.
한쪽에만 테두리가 적용된 예 :
양면에 테두리가 적용된 예 :
모든면에 테두리가 적용된 예 :
스크린 샷 :
이 작업을 수행하는 다른 방법은 선형 그라디언트와 함께 테두리 이미지를 사용하는 것입니다.
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+
더 나은 지원을 위해 공급 업체 접두사도 추가하십시오.
또 다른 해결책은 배경 이미지를 사용하여 왼쪽 테두리 모양을 모방 할 수 있다는 것입니다.
- 그래픽으로 필요한 테두리 왼쪽 스타일 만들기
- div의 가장 왼쪽에 배치하십시오 (이전 브라우저의 경우 텍스트 크기를 대략 2 배 늘릴 수있을 정도로 길어야합니다)
- div 상단에서 수직 위치를 50 %로 설정하십시오.
IE를 조정해야 할 수도 있지만 (평소와 같이) 원하는 디자인이라면 유용 할 것입니다.
- 나는 일반적으로 CSS가 본질적으로 제공하는 것에 이미지를 사용하는 것에 반대하지만 때로는 디자인에 필요한 경우 다른 방법이 없습니다.