CSS-상자 그림자 추가
928 단어 cssworkaround
놀랍지 않은 솔루션
우리는 관련 요소에서
box-shadow
속성을 복사하여 붙여넣고, 끝에 추가 음영을 추가할 수 있다.물론, 이것은 목표 요소의 테두리 음영을 알아야 한다. 이것은 항상 가능하지 않을 수도 있다. (예를 들어, 다시 사용할 수 있는 .highlight-glow
클래스를 만드는 것).이것은 우리가 시작했을 때와 비슷한 문제를 남겼다. 논의한 요소가
::before
또는 ::after
에서 우리와 충돌하는 양식이 생겼을 수도 있다.내 솔루션
CSS 변수를 사용하여 상자 섀도우를 적용합니다.
.shadowy-figure { --box-shadow: .5em .5em 1em #333; box-shadow: var(--box-shadow);}
나중에 이 변수의 끝에 다음과 같은 내용을 추가할 수 있습니다..highlight { box-shadow: var(--box-shadow), 0 0 .1em #fff inset;}
한 가지 단점은 우리가 몇 가지 유형에서 이런 기술을 사용해서 하나의 요소에 응용할 수 없다는 것이다.우리는 CSS에서 이 문제를 해결할 수 있다. 만약 당신이 이 글을 읽었을 때 이미 해결되었다면, 반드시 나에게 알려줘야 한다.
Reference
이 문제에 관하여(CSS-상자 그림자 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dz4k/css-adding-additional-box-shadows-2lob텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)