WordPress 블록 및 요소에 상자 그림자를 추가합니다

wordpress 6.1 테마 JSON 파일에 상자 그림자를 추가하십시오 최근에, Ana Segota는 The Theme.json 파일에서 버튼의 호버 상태에 CSS 상자 그림자를 추가하는 방법을 트위터에 물었습니다. WordPress는 우리가 기본 스타일을 설정하기 위해 Theme.json을 블록 테마로 사용하기를 원하기 때문입니다. 전통적으로 우리는 모든 스타일에 대한 "클래스"테마에서 Style.css를 사용합니다. 그러나 WordPress 6.1이 Theme.json으로 마이그레이션하는 Default Twenty Twent3 (TT3) 테마의 최근 출시로 우리는 자신의 테마에서 동일한 작업을 수행 할 수 있습니다.

<.> 그러나 Theme.json은 여전히 ​​많은 CSS 속성 및 선택기를 지원하지 않습니다. 예를 들어, 현재

및 기타 속성을 테마로 사용하는 것은 불가능합니다.

운 좋게도 WordPress 6.1부터 Theme.json은

속성을 ​​지원합니다. 다음은 Theme.json에 상자 섀도 잉을 적용하는 방법입니다 (예 : 특집 이미지 블록) :

새로운 색상 구문 perspective-origin는 아직 지원되지 않은 것 같습니다.

마찬가지로, 박스 그림자를 단일 "요소"(예 : 버튼)에 적용 할 수 있습니다. 버튼 자체는 블록이지만 다른 블록에 중첩 될 수도 있습니다. 모든 버튼의 상자 그림자에 전 세계적으로 적용하려면 다음을 수행 할 수 있습니다.

ana는 버튼의 box-shadow 상태에 그림자를 추가하려고합니다. 고맙게도, WordPress 6.1은 또한 의사 클래스 (,

,

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "blocks": {
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

및 포함)를 사용한 버튼 및 링크와 같은 특정 요소의 대화식 상태에 대한 스타일을 지원합니다.

rgb(0 0 0 / 0.66) 부모 테마를 사용하는 경우 어린이 테마에서 테마 스타일을 무시할 수 있습니다. 다음 코드는 TT3의 버튼 스타일을 완전히 다룹니다.

전체 코드보기

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

또 다른 방법은 pixl 테마에 정의 된 속성과 같은 사용자 정의 스타일을 사용하는 것입니다. :hover 또한 속성은 테마를 지원하며 버튼과 상호 작용 상태에 적용 할 수 있습니다. :hover 공식적으로 지원되는 설정, 사용자 정의 스타일 방법 및 하위 주제에서 스타일을 덮어 쓰는 메소드를 포함하여 WordPress 6.1의 블록 테마에 대한 상자 그림자를 설정하는 방법에는 여러 가지가 있습니다. 자세한 내용은 기사에 나열된 링크를 참조하십시오. :focus :active :visited

위 내용은 WordPress 블록 및 요소에 상자 그림자를 추가합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!