이것을 통해 CSS에 약간의 유연성을 추가 할 수 있는지 알고 싶습니다.
<div class='round5'></div>
.round둥근 모서리가있는 클래스는 어디에 있고 '5'는 반경의 양을 결정합니다. 가능할까요? 나는 몇 가지를 보았지만 구현이 어떻게 발생하는지 모르겠습니다.
2018 년에이 문제를 겪는 모든 사람을 위해 완전히 지원되지 않는 CSS 변수는 이제 변수를 클래스에 직접 전달할 수있는 기능을 제공합니다.
<div class="round" style="--radius: 100%;"></div>
<style>
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
루트 변수를 정의하고 전달할 수도 있습니다.
<div class="round" style="--radius: var(--rad-50);"></div>
<style>
:root {
--rad-0: 0%;
--rad-50: 50%;
--rad-100: 100%;
}
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
이것은 또한 요소로 범위가 지정됩니다. --radius한 요소 를 설정하면 다른 요소에 영향을 미치지 않습니다. 꽤 재즈 맞아!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다