(Pseudo) 요소를 부모의 국경 박스로 제한합니다

이 튜토리얼은 복잡한 해결 방법을 피하면서 부모의 국경 박스 내에 의사 요소의 디스플레이를 제한하는 깨끗한 방법을 보여줍니다. 목표는 최소한의 마크 업과 효율적인 CSS를 사용하여 시각적으로 매력적인 결과입니다. 추가 요소를 추가하거나 여러 모양을 사용하거나 CSS의 광범위한 목록을 사용하지 않고이를 달성 할 수 있습니다.

도전은 의사 요소의 스타일, 특히 그라디언트 및 둥근 모서리가 부모의 경계 내에 엄격하게 남아 있도록하는 데 있습니다. 해결책을 탐색합시다.

마크 업

우리의 기본 마크 업은 단락을 사용합니다 (<p> ) 데이터 배열에서 생성 된 요소 (Brevity 용 Pug 사용) :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;p style=&quot;--slist: #ebac79, #d65b56&quot;&gt; 팬케이크 머핀 초콜릿 시럽 브라우니.&lt;/p&gt; &lt;p style=&quot;--slist: #90cbb7, #2fb1a9&quot;&gt;케이크 레몬 베리 머핀 매화 마카롱.&lt;/p&gt; &lt;p style=&quot;--slist: #8a7876, #32201c&quot;&gt;웨이퍼 애플 타르트 파이 머핀 진저 브레드.&lt;/p&gt; &lt;p style=&quot;--slist: #a6c869, #37a65a&quot;&gt;감초 매실 토핑 초콜릿 레몬.&lt;/p&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 각 단락의 스타일 속성에는 그라디언트 색상 정지를 고정하는 CSS 변수 ( <code>--slist )가 포함됩니다.

기본 스타일

초기 단락 스타일은 치수, 글꼴 및 경계-라디우스를 설정합니다.

 $ W : 26EM;
$ H : 5EM;

p {
  너비 : $ W; 높이 : $ H;
  Border-Radius : .5*$ h;
  배경 :은;
  글꼴 : 1.5em/ 1.375 Trebuchet MS, Verdana, Sans-Serif;
}

이것은 우리의 추가 스타일을위한 시각적 기반을 제공합니다.

계층화 된 배경

background-clip 사용하여 계층화 된 배경을 만듭니다. 콘텐츠 박스, 패딩 박스 및 테두리 박스에 대한 그라디언트 응용 프로그램을 제어합니다.

 p {
  / * ... 이전 스타일 ... */
  디스플레이 : Flex;
  정렬 구조 : 센터;
  정당화 컨텐츠 : 공간 중간;
  박스 사이징 : 국경 박스;
  국경 : Solid $ B Transparent;
  패딩 : $ P;
  배경: 
    Linear-Gradient (#dbdbdb, #fff) 컨텐츠 박스, 
    선형 그레이드 (VAR (-List)) 패딩 박스, 
    선형 그레이드 (#fff, #dcdcdc) 테두리 박스;
  텍스트 안정 : 1em;
}

이 기술은 그라디언트가 border-radius 에 의해 정의 된 둥근 모서리를 존중하도록합니다.

번호 매기기

단락 번호는 :after 사용하여 추가됩니다.

 $ d : $ h -2*$ b;

p {
  / * ... 이전 스타일 ... */
  반격 : C;

  &:후에 {
    상자 사이징 : 상속;
    국경 : 상속;
    너비 : $ D; 높이 : $ D;
    국경-라디우스 : 50%;
    Box-Shadow : 
      삽입 0 1px 1px #efefef, 
      inset 0 #{-$ b} rgba ( #000, .1);
    배경: 
      선형 그레이드 (VAR (-List)) 패딩 박스, 
      선형 등급 ( #d0d0d0, #e7e7e7) 테두리 박스;
    색상 : #fff;
    내용 : 카운터 (C, 10 진수-제로);
    디스플레이 : 그리드;
    장소-대륙 : 센터;
    마진 오른쪽 : -$ P;
    텍스트 안정 : 0;
  }
}

이것은 원형 번호가 매겨진 마커를 만듭니다.

화살표 pseudo 요소

각진 화살표는 :before pseudo element :

 p {
  / * ... 이전 스타일 ... */
  위치 : 상대;

  &:전에 {
    위치 : 절대;
    오른쪽 : -$ b;
    너비 : $ H;
    높이 : $ H;
    Border-Radius : $ B;
    변환 : 회전 (45deg);
    Box-Shadow : 0 0 7px RGBA (#000, .2);
    배경 : 선형 등급 (-45deg, 투명한 계산 (50%- #{. 5*$ h}), 오렌지 0, 자주색 계산 (50% #{. 5*$ h}), 투명 0);
    콘텐츠: '';
    클립 경로 : 삽입 (0 라운드 $ r);
  }
}

결정적으로 clip-path: inset(0 round $r) 화살표가 border-radius 존중하여 부모의 국경 박스 내에 머무르도록합니다. 그라디언트의 정지 위치는 부모의 상단 및 하단 모서리와 정렬되도록 신중하게 계산됩니다.

이 접근법은 의사 요소를 부모의 국경 박스에 제한하는 문제에 대한 시각적으로 매력적이고 효율적으로 코딩 된 솔루션을 제공합니다. clip-path: inset() 의 사용은이를 달성하기위한 간결하고 효과적인 방법을 제공합니다.

위 내용은 (Pseudo) 요소를 부모의 국경 박스로 제한합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!