틀:테두리 그라데이션: 두 판 사이의 차이

편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
{{namucat|김찬/제작한 틀}}
{{namucat|김찬/제작한 틀}}
<onlyinclude><includeonly>border: 2px solid {{tp}}; background: linear-gradient({{{배경색|white}}}, {{{배경색|white}}}) padding-box, linear-gradient({{{그라데이션}}}) border-box; border-radius: {{{곡률|1px}}}</includeonly></onlyinclude>
{{틀 도움}}
<onlyinclude><includeonly>border: {{{두께|1px}}} solid transparent; border-image: {{{1|linear-gradient(135deg, red, blue)}}}; border-image-slice: 1</includeonly></onlyinclude>
{{목차제거}}
{{목차제거}}
== 설명 ==
== 설명 ==
8번째 줄: 9번째 줄:


== 사용법 ==
== 사용법 ==
<pre>{{테두리 그라데이션|배경색=|그라데이션=|곡률=}}</pre>
<pre>{{테두리 그라데이션|<그라데이션>|두께=<두께(선택, 기본 1px)>}}</pre>
 
배경색은 테이블이나 div의 배경색입니다. 기본값은 white입니다. 배경 그라데이션을 이용하여 테두리에 그라데이션을 입히는 원리이므로 배경색에 white가 아닌 다른 색을 입히려면 꼭 입력해야 합니다.
 
그라데이션은 본격적인 테두리 그라데이션을 입력하는 변수입니다. {{ffms|<nowiki>linear-gradient();</nowiki>}}에서 괄호 안에 해당하는 문법을 직접 입력합니다.
 
곡률은 border-radius에 해당하는 변수입니다. 이 틀에 해당하는 문법을 그냥 사용하면 border-radius 값이 생기는데, 이를 기본값으로 강제로 1px로 만듭니다. (0px로 입력하면 테두리에 문제가 생깁니다.) 물론 둥글게 만드려면 이 변수를 사용하면 됩니다. 단위는 입력되어 있지 않으므로 px이나 % 등 단위와 함께 입력해야 합니다.


== 주의사항 ==
== 주의사항 ==
* 이 틀을 사용하면 그곳에는 '''background와 border, 그리고 border-radius 문법을 사용하면 안 됩니다.''' 안 그럼 문법이 꼬여 정상 작동하지 않을 수 있습니다.
* 틀은 테이블이나 div의 style="" 안에 사용해야 합니다.
* 틀은 테이블이나 div의 style="" 안에 사용해야 합니다.
* 틀 문법에는 속성을 구분하는 세미콜론(;)이 입력되어 있지 않으므로 이 틀을 사용한 뒤 꼭 틀 뒤에 세미콜론을 붙여야 합니다.
* 틀 문법에는 속성을 구분하는 세미콜론(;)이 입력되어 있지 않으므로 이 틀을 사용한 뒤 꼭 틀 뒤에 세미콜론을 붙여야 합니다.
* 테두리는 반드시 2px 두께로 생깁니다.


== 둘러보기 ==
== 둘러보기 ==
{{김찬 제작 틀}}
{{김찬 제작 틀}}

2024년 7월 25일 (목) 22:22 판

:테두리 그라데이션
사용문서
새로고침
넘겨주기
이동하기

설명

이 틀은 {{border-gradient}}로도 사용할 수 있습니다.

테이블이나 div 등의 테두리에 그라데이션을 입히는 틀입니다.

사용법

{{테두리 그라데이션|<그라데이션>|두께=<두께(선택, 기본 1px)>}}

주의사항

  • 틀은 테이블이나 div의 style="" 안에 사용해야 합니다.
  • 틀 문법에는 속성을 구분하는 세미콜론(;)이 입력되어 있지 않으므로 이 틀을 사용한 뒤 꼭 틀 뒤에 세미콜론을 붙여야 합니다.

둘러보기

+
김찬 제작 틀
[ A~Z & etc. ]
[ ㄱ~ㅅ ]
[ ㅇ~ㅎ ]
※ 더 이상 사용하지 않거나 사용할 필요가 없는 경우 취소선 처리
※ 일부 극히 단순한 틀은 본 틀 목록에 미포함