CSS를 사용하여 프레임 만들기. CSS: 테두리. 요소 경계 의사 요소란 무엇이며 어떤 용도로 유용합니까?
설명
일반 테두리 속성을 사용하면 요소 주위 테두리의 두께, 스타일 및 색상을 동시에 설정할 수 있습니다. 값은 순서에 관계없이 공백으로 구분될 수 있습니다. 브라우저 자체에서 원하는 속성에 해당하는 값을 결정합니다. 요소의 특정 면에만 테두리를 설정하려면 border-top , border-bottom , border-left , border-right 속성을 사용하세요.
통사론
가치
border-width 값은 테두리의 두께를 결정합니다. 모양을 제어하기 위해 여러 가지 테두리 스타일 값이 제공됩니다. 그들의 이름과 행동의 결과는 그림 1에 나와 있습니다. 1.
그림 1. 프레임 스타일
border-color는 테두리 색상을 설정하며 값은 CSS에서 허용하는 모든 형식이 될 수 있습니다.
상속은 부모의 값을 상속합니다.
HTML5 CSS2.1 IE Cr Op Sa Fx
이 예에서는 레이어 주위에 이중 테두리를 추가합니다. 결과는 그림 1에 나와 있습니다. 2.
쌀. 2. 테두리 속성 적용
객체 모델
document.getElementById("elementID ").style.border
브라우저
버전 6까지의 Internet Explorer 브라우저는 테두리 두께가 1px인 점선으로 점선으로 표시됩니다. 두께가 2px 이상이면 점선 값이 올바르게 작동합니다. 이 버그는 IE7에서 수정되었지만 모든 1px 테두리에만 해당됩니다. 블록 테두리 중 하나의 두께가 2px 이상인 경우 IE7에서는 점선 값이 점선으로 변경됩니다.
Internet Explorer 버전 7.0 이하에서는 상속 값을 지원하지 않습니다.
Groove , ridge , inset 또는 outset 값을 사용할 때 테두리 스타일은 브라우저마다 약간 다를 수 있습니다.
요소의 테두리를 제어하려면 일반 테두리 속성을 사용하세요. 이 속성을 사용하면 단일 선언에서 요소 테두리의 두께, 스타일 및 색상을 설정할 수 있습니다.
이러한 세 가지 속성(테두리 두께, 테두리 스타일 및 색상)은 단일 선언으로 설정할 수 있습니다. 예는 다음과 같습니다.
요소의 한쪽에만 테두리 스타일을 지정할 수 있습니다. 이렇게 하려면 border-top(상단 테두리), border-right(오른쪽 테두리), border-bottom(하단 테두리), border-left(왼쪽 테두리) 속성을 사용하세요.
이 예에서는 블록의 각 측면에 서로 다른 테두리 두께, 스타일 및 색상이 있습니다.
CSS를 사용하여 이와 같은 모양을 만드는 방법을 생각해 보세요.
테두리 값(두께, 스타일, 색상)은 특수 속성을 사용하여 별도로 설정할 수 있습니다.
- border-style - 테두리 스타일.
- 테두리 너비 - 테두리 너비.
- border-color - 테두리 색상입니다.
각 값을 개별적으로 고려해 보겠습니다.
테두리 스타일 속성 테두리 스타일.
border-style 속성은 테두리 스타일을 설정합니다. CSS에서는 HTML과 달리 요소의 테두리가 단색일 수 없습니다. 테두리 스타일에는 다음 값이 허용됩니다.
- 없음 - 테두리가 없습니다(기본값).
- 솔리드 - 솔리드 테두리.
- 이중 - 이중 테두리.
- 점선 - 점선 테두리.
- 점선 - 일련의 점으로 구성된 테두리입니다.
- 능선 - "능선"경계.
- 그루브 - "그루브" 경계.
- 삽입 - 우울한 테두리.
- 시작 - 돌출된 테두리.
그들이 어떻게 생겼는지에 대한 예.
국경 없음 (없음)
실선 테두리
이중 국경
일련의 점들의 경계(점선)
점선 테두리
홈 테두리
능선 경계
들여쓰기된 테두리(삽입)
돌출된 테두리(시작)
그런데 능선 프레임의 테두리 색상을 검은색으로 설정하면 이런 결과가 나옵니다.
검은색 테두리와 능선 스타일이 있는 div 블록입니다.
프레임이 탄탄해 보이는데, 이는 블랙 섀도우 효과를 추가하여 능선 스타일을 만들어낸 것이고, 블랙 프레임에서는 블랙 효과가 보이지 않기 때문입니다.
border-style 속성을 사용하면 블록의 모든 면에만 테두리 스타일을 설정할 수 있는 것이 아닙니다. 하나의 테두리 스타일 속성에 여러 값을 설정할 수 있으며, 값 수에 따라 테두리 스타일이 블록의 다른 측면 수에 지정됩니다. 1개, 2개, 3개 또는 4개의 값을 설정할 수 있습니다. 각 사례에 대한 예를 살펴보겠습니다.
하나의 값(단색) - 블록의 모든 면에 테두리 스타일이 설정됩니다.
두 개의 값(solid double) - 첫 번째 값은 위쪽 및 아래쪽 스타일을 설정하고 두 번째 값은 측면을 설정합니다.
세 가지 값(실선 이중 점선) - 첫 번째 값은 위쪽, 두 번째는 측면, 세 번째는 아래쪽입니다.
4개의 값(실선 이중 점선) - 위에서부터 시계 방향으로 한쪽의 값입니다.
테두리 너비 속성입니다. 테두리 두께.
요소의 테두리 너비를 설정하려면 border-width 속성을 사용하세요. 테두리 두께는 절대 측정 단위(예: 픽셀)로 지정할 수 있습니다.
border-style 속성과 마찬가지로 이 속성도 1~4개의 값으로 설정할 수 있습니다. 각 사례에 대한 예를 살펴보겠습니다.
예제 코드:
border-width 속성에 대한 키워드 값도 있습니다. 총 3가지가 있습니다:
- 얇은 - 얇은 테두리;
- 중간 - 평균 두께;
- 두꺼운 - 두꺼운 테두리;
테두리 두께: 얇음.
테두리 두께: 중간.
테두리 두께: 두껍습니다.
테두리 색상 속성입니다. 테두리 색상.
테두리 색상을 제어하려면 테두리 색상 도구를 사용하세요. 이 속성의 색상은 "CSS의 색상" 문서에 설명된 방법을 사용하여 설정할 수 있습니다.
- 색상의 16진수 표기(#ff00aa)입니다.
- RGB 형식은 rgb(255,12,110) 입니다. CSS3용 RGBA 형식.
- CSS3용 HSL 및 HSLA 형식.
- 색상 이름(예: 검정색) 색상 이름의 전체 목록은 CSS 색상 이름 표를 참조하세요.
border-color 속성도 1~4개의 값을 가질 수 있으며 이전 속성과 유사하게 처리됩니다.
하나의 값(빨간색).
두 가지 값(빨간색 검정색).
세 가지 값(빨간색 검정색 노란색).
4가지 값(빨간색 검정색 노란색 파란색).
이제 위에서 언급한 문제로 돌아가서 그림을 그려보겠습니다.
다음은 크기가 더 큰 그림을 그리는 코드입니다.
측면의 값을 별도로 설정
블록의 한쪽에만 테두리 속성 값을 지정할 수 있다고 위에서 언급했습니다. 다음과 같은 목적을 위한 속성이 있습니다.
- 국경 정상
- 테두리 오른쪽(오른쪽 테두리)
- 국경 바닥
- border-left(왼쪽 테두리)
모든 속성에 대해 세 가지 값(두께, 스타일 및 색상)이 순서에 관계없이 지정된다는 점을 상기시켜 드리겠습니다. 하지만 각 면의 두께, 색상, 스타일을 별도로 설정할 수 있는 속성이 있습니다. 이러한 속성의 작성은 위에서 파생됩니다.
상단 테두리 옵션(테두리-상단).
- border-top-color - 요소의 상단 테두리 색상을 설정합니다.
- border-top-width - 요소의 상단 테두리 두께를 설정합니다.
- border-top-style - 요소의 상단 테두리 스타일을 설정합니다.
오른쪽 테두리 옵션(테두리-오른쪽).
- border-right-color - 요소의 오른쪽 테두리 색상을 설정합니다.
- border-right-width - 요소의 오른쪽 테두리 두께를 설정합니다.
- border-right-style - 요소의 오른쪽 테두리 스타일을 설정합니다.
하단 테두리 옵션(테두리-하단).
- border-bottom-color - 요소의 아래쪽 테두리 색상을 설정합니다.
- border-bottom-width - 요소의 아래쪽 테두리 두께를 설정합니다.
- border-bottom-style - 요소의 아래쪽 테두리 스타일을 설정합니다.
왼쪽 테두리 옵션(테두리-왼쪽).
- border-left-color - 요소의 왼쪽 테두리 색상을 설정합니다.
- border-left-width - 요소의 왼쪽 테두리 두께를 설정합니다.
- border-left-style - 요소의 왼쪽 테두리 스타일을 설정합니다.
이러한 속성을 사용하는 예:
- border-top-color 속성을 사용하여 상단 테두리의 색상을 빨간색으로 재정의했습니다.
- border-right-width 속성을 사용하여 오른쪽 테두리의 두께를 10px로 설정하고,
- border-bottom-style 속성을 사용하면 아래쪽 테두리 스타일이 이중으로 재정의됩니다.
- border-left-color 속성을 사용하면 왼쪽 테두리 색상이 파란색으로 설정됩니다.
테두리 반경 속성입니다. 둥근 테두리 모서리.
border-radius 속성은 요소 테두리의 모서리를 둥글게 만드는 데 사용됩니다. 이 속성은 CSS3에 도입되었으며 Internet Explorer 8(및 이전 버전)을 제외한 모든 최신 브라우저에서 올바르게 작동합니다.
값은 CSS에서 사용되는 임의의 숫자일 수 있습니다.
테두리 반경 속성: 15px.
블록 프레임을 지정하지 않으면 배경과 함께 모깎기가 발생합니다. 다음은 테두리가 없지만 배경색이 있는 둥근 블록의 예입니다.
테두리 반경 속성: 15px.
요소의 각 모서리를 둥글게 만드는 속성이 있습니다. 이 예제에서는 모두 사용합니다.
테두리 상단 왼쪽 반경: 15px; 테두리 오른쪽 상단 반경: 0; 테두리 하단 오른쪽 반경: 15px; 테두리 하단 왼쪽 반경: 0;
테두리 반경 속성: 15px.
이 코드는 하나의 선언으로 작성할 수 있지만 border-radius : 15px 0 15px 0 . 사실 border-radius 속성은 1~4개의 값으로 설정할 수 있습니다. 아래 표에는 그러한 발표에 적용되는 규칙이 요약되어 있습니다.
이 표를 주의 깊게 살펴보면 원하는 스타일에 대한 가장 짧은 항목이 다음과 같다는 것을 이해할 수 있습니다: border-radius : 15px 0 . 두 가지 의미만 있습니다.
약간의 연습
CSS를 사용하여 레몬 그리기.
이러한 블록에 대한 코드는 다음과 같습니다.
여백: 0 자동; /* 블록을 중앙에 배치 */ width: 200px; 높이: 200px; 배경: #F5F240; 테두리: 1px 실선 #F0D900; 테두리 반경: 10px 150px 30px 150px;
우리는 이미 그림을 그렸습니다.
이제 삼각형을 남겨 보겠습니다.
삼각형 코드는 다음과 같습니다.
여백: 0 자동; /* 블록을 중앙에 배치 */ padding: 0px; 너비: 0px; 높이: 0; 테두리: 30px 단색 흰색; 테두리 하단 색상: 빨간색;
재산 CSS – « 국경"를 사용하면 요소 주위의 경계선의 두께, 색상 및 유형을 설정할 수 있습니다. 이 속성의 매개변수는 한 줄에 공백으로 구분하여 임의의 순서로 작성할 수 있습니다.
- - 선 두께 1픽셀
- - 실선
- - 화이트 색상
- - 검은 색
- - 회색 색상
솔리드 요소 테두리
대시 요소 테두리
점선 요소 테두리
이중선이 있는 요소 테두리
개별 테두리 섹션의 속성
볼륨이 있는 프레스 홈 프레임
볼록한 골판지 프레임
체적 프레스 프레임
체적 볼록 프레임
수업 / CSS /
7단원: CSS 요소 테두리
거의 모든 웹사이트는 요소 주위에 테두리를 만드는 속성을 사용합니다. 버튼이나 텍스트가 있는 블록에 필요합니다. 테두리를 만들기 위해 요소에는 CSS의 두 가지 속성인 테두리와 윤곽선이 있습니다. 그들을 살펴보자.
국경
이 속성은 요소 주위에 프레임을 설정하는 데 필요합니다. 요소를 배치할 때 프레임 너비가 고려됩니다. 색상, 두께, 프레임 유형의 3가지 의미를 갖습니다.
테두리 속성의 구문은 다음과 같습니다.
테두리: 너비 유형 색상;
속성 값을 지정하기 위해 다른 순서를 선택할 수 있지만 가장 중요한 것은 공백을 사용하는 것입니다.
프레임의 두께(너비)는 픽셀(px) 또는 백분율(%)로 지정해야 합니다.
색상은 RGB(Red Green Blue) 형식이나 HTML HEX 코드로 지정할 수 있습니다.
아래는 라인의 종류그들의 이름으로:
요소의 테두리를 설정하는 방법은 무엇입니까? 우리는 다음과 같이 합니다:
#차단하다 (
테두리:3px 솔리드 #0085cc; /* 선의 두께를 3픽셀로 파란색으로 설정 */
}
하나, 둘, 셋을 설치하고 싶다면 특정 측면의 프레임, 그러면 다음과 같이 표시합니다.
국경 정상- 상단에 프레임;
국경 바닥- 하단 프레임;
국경 왼쪽- 왼쪽 프레임;
국경 오른쪽- 오른쪽 프레임;
차단하다 (
테두리 오른쪽: 3px 솔리드 #0085cc;
테두리 하단: 2px 점선 #0085cc;
}
당신이 원한다면 프레임 제거 CSS의 요소를 선택한 다음 테두리 속성에 씁니다. - 없음
비어 있는 (
테두리: 없음; /* 클래스가 비어 있는 요소에는 테두리가 없습니다 */
}
개요
아웃라인은 요소의 외부 테두리를 설정하는 데 필요한 속성입니다.
먹다 국경과의 두 가지 차이점:
첫째, 윤곽선에 지정된 줄은 블록 자체의 위치, 너비 및 높이에 영향을 미치지 않습니다.
둘째, 특정 측면에 프레임을 설치할 가능성이 없습니다.
구문은 border와 동일합니다.
개요: 2px 점선 #0085cc; /* 프레임 2픽셀 파란색 점선 */
외곽선과 테두리의 경우 none을 작성하여 프레임을 제거할 수 있습니다.
관심을 가져주셔서 감사합니다!
이전 기사
레슨 6.
요소 경계.
CSS의 패딩 및 여백. 여백과 패딩이란 무엇입니까? 다음 기사
Lesson 8. CSS에서 요소의 텍스트 색상과 배경을 설정하는 방법은 무엇입니까?
기사에 대한 댓글(vk.com)
국경
브라우저 지원
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
설명
CSS 속성을 사용하면 블록 테두리의 너비, 스타일 및 색상을 동시에 설정할 수 있습니다. 블록 테두리는 모든 측면에서 블록을 둘러싸는 규칙적인 선/프레임입니다. 프레임을 추가하면 블록의 전체 크기에 영향을 미친다는 점을 고려해 볼 가치가 있습니다.
값은 공백으로 구분되며 어떤 순서로든 나타날 수 있습니다. 브라우저 자체에서 원하는 매개변수에 해당하는 값을 결정합니다. 세 가지 값을 모두 지정할 필요는 없습니다. 너비 및/또는 색상을 생략할 수 있습니다. 이 경우 기본적으로 속성에 설정된 값이 누락된 값 대신 사용됩니다. 예를 들어 너비가 지정되지 않은 경우 속성의 기본값이 사용됩니다. 구문 아래에 있는 표는 사용할 수 있는 속성의 값을 나타냅니다.
참고: 요소의 특정 면에만 테두리를 설정하려면 border-top, border-bottom, border-left, border-right 속성을 사용하세요.
팁: 일반적으로 테두리를 사용할 때는 패딩을 추가해야 합니다.
CSS 속성: 테두리
블록 프레임과 해당 내용(텍스트, 이미지 또는 하위 태그) 사이에 공백을 추가합니다. 일반적으로 테두리는 요소의 콘텐츠 가까이에 그려지는데, 이는 이미지 주위에 테두리를 설정해야 하는 경우에만 유용합니다.
통사론
테두리: 테두리 너비 테두리 스타일 테두리 색상|상속;
속성 값
예
여기에 텍스트가 있습니다.
브라우저 창에 표시된 이 예제의 결과는 다음과 같습니다.
상자 테두리의 색상, 스타일 및 크기를 설정하는 방법입니다.
마크업 언어에서는 border( 국경)에는 표, 그림, 프레임만 있고 어떤 경우에는 테두리 색상을 설정할 수 있으며 그게 전부입니다.
테두리 속성
계단식 스타일 시트는 더 많은 옵션을 제공하지만 가장 먼저 해야 할 일이 있습니다.
CSS에서는 다음을 사용하여 테두리 너비를 제어할 수 있습니다. 테두리 너비또는 더 정확하게 말하면 각 면의 두께를 개별적으로 제어할 수 있습니다.
테두리 상단 너비- 상단 테두리의 두께
테두리 오른쪽 너비— 오른쪽 테두리의 두께
테두리 하단 너비- 아래쪽 테두리의 두께
테두리 왼쪽 너비— 왼쪽 연석의 두께
그러나 다음과 같이 단축된 형태도 있을 수 있습니다.
P(테두리 너비:오른쪽 위 왼쪽 아래;)(오른쪽 위 왼쪽 아래).
테두리 너비는 다음과 같이 설정할 수 있습니다.
숫자로 DIV(border-width:5px), 0에서 무한대까지, 즉 긍정적인.
얇은— 얇은 테두리, DIV(테두리 너비:얇음)
중간- 중간 테두리, DIV(테두리 너비:중간)
두꺼운- 두꺼운 테두리, DIV(테두리 너비:두꺼움)
숫자는 명확하지만 이 값을 사용하면 모두 브라우저에 따라 다르지만 여전히 얇은<= medium <= thick
.
다음을 사용하여 테두리 색상을 제어할 수도 있습니다. 테두리 색상더 정확하게 말하면 각 면의 색상은 다음과 같습니다.
테두리 상단 색상상단 테두리 색상;
테두리 오른쪽 색상오른쪽 테두리 색상;
테두리 하단 색상하단 테두리 색상;
테두리 왼쪽 색상왼쪽 테두리 색상입니다.
색상 값은 다음과 같이 설정됩니다. 색상, 즉. 16가지 색상 중 하나: 아쿠아, 블랙, 블루, 퓨샤, 그레이, 그린, 라임, 마룬, 네이비, 올리브, 퍼플, 레드, 실버, 청록색, 흰색 또는 노란색, 색상을 설정할 수도 있습니다. 색상:#000000, 색상:#AF0 , 색상:rgb(255,0,0)또는 색상: RGB(100%, 0%, 0%).
어떤 색 구성표를 선택하든 브라우저는 이를 다음과 같은 색 구성표로 변환합니다. 색상:rgb(255,0,0). 예를 들어 색상:라임 = 색상:#00ff00 = 색상:#0F0 = 색상:RGB(0%, 100%, 0%), 그러나 브라우저의 경우 모두 동일합니다. 색상:rgb(0,255,0), 즉. 이 값을 계산합니다.
테두리의 두께와 색상을 HTML로 제어할 수 있는 경우 스타일( 테두리 스타일) CSS만!!!
스타일은 양쪽에서 개별적으로 제어할 수 있습니다.
테두리 상단 스타일상단 테두리 스타일;
국경 오른쪽 스타일오른쪽 테두리 스타일;
테두리 하단 스타일하단 테두리 스타일;
국경 왼쪽 스타일왼쪽 테두리 스타일.
이제 스타일 값을 살펴보겠습니다.
1)테두리 스타일:없음- border-width:0과 유사한 기본값입니다.
2)테두리 스타일:숨김-나중에 살펴볼 테이블을 제외하고는 동일합니다.
3)테두리 스타일:점선— 점으로 이루어진 테두리입니다.
4)테두리 스타일:점선— 점선으로 이루어진 테두리입니다.
5)테두리 스타일:단색— 실선으로 이루어진 테두리, 즉 HTML에서와 마찬가지로.
6)테두리 스타일:이중— 이중 실선으로 구성된 테두리입니다. 여기서는 최소 3픽셀의 테두리 너비가 필요합니다.
7)테두리 스타일:그루브— 테두리가 캔버스를 잘라낸 것처럼 보입니다.
8)테두리 스타일:능선— 테두리가 캔버스 위로 튀어나온 것처럼 보입니다.
9)테두리 스타일:삽입— 상자 전체가 캔버스에 눌려진 것처럼 보입니다.
10)테두리 스타일:시작- 전작과 반대다.
일부 브라우저에서는 점선, 점선, 이중, 홈, 능선, 삽입 및 외부 값을 무시하고 실선으로 표시할 수 있습니다. 평범한 국경.
물론 이것은 모두 사실이지만 위의 모든 예는 작동 원리일 뿐 메커니즘이 아닙니다.
규칙 속성 국경(테두리: 크기 스타일 색상)을 의미합니다. 예를 들어 세 가지 값이 모두 존재하고 이 순서로만 있는 경우 이 규칙이 충족됩니다. H1( 테두리: 5px 이중 빨간색;), 그러나 이러한 값이 마크업 언어(예: 테이블)에서 제공되는 경우 예외가 있을 수 있습니다. 표(테두리: 2px), 즉. 하나의 값만 지정됩니다.
전체 테두리가 아닌 각 부분을 개별적으로 관리하려면 다음과 같은 규칙이 있습니다.
(테두리 상단: 사이즈 스타일 색상;)상부 연석 제어;
(테두리-오른쪽: 사이즈 스타일 색상;)오른쪽의 연석 통제;
(테두리-하단: 사이즈 스타일 색상;)하단 연석 제어;
(테두리-왼쪽: 사이즈 스타일 색상;)왼쪽에 커브 컨트롤이 있습니다.
이러한 규칙은 개별적으로 또는 모두 함께 사용할 수 있습니다.
예외는 다음 규칙입니다.
H1(
테두리: 4px 단색 녹색;
}
문제는 CSS에서 마지막 규칙의 우선순위가 가장 높다는 것입니다. 이 경우 border 속성에는 border-left가 포함되어 있으므로 border-left 규칙은 다음과 같이 무시됩니다.
H1(
테두리: 4px 단색 녹색;
테두리 왼쪽: 2px 이중 빨간색;
}
먼저 전체 테두리에 대한 규칙을 설정한 다음 개별 섹션에 대한 규칙을 설정합니다.
테이블과 기타 예외에 접근할 때 일부 속성을 살펴볼 것이라는 점을 제외하면 요소의 테두리에 대한 모든 것이 있습니다.
CSS: 테두리. 요소 경계.
CSS3 테두리
CSS3 테두리
CSS3를 사용하면 Photoshop과 같은 디자인 프로그램을 사용하지 않고도 둥근 테두리를 만들고, 컨테이너에 그림자를 추가하고, 이미지를 테두리로 사용할 수 있습니다.
이 단원에서는 테두리의 다음 속성에 대해 알아봅니다.
- 국경 반경
- 상자 그림자
- 테두리 이미지
브라우저 지원
| 재산 | 브라우저 지원 |
|---|---|
| 국경 반경 | |
| 상자 그림자 | |
| 테두리 이미지 |
Internet Explorer 9에서는 새로운 테두리 속성 중 일부를 지원합니다.
Firefox에서는 border-image에 -moz- 접두사가 필요합니다.
Chrome과 Safari에서는 border-image에 -webkit- 접두사가 필요합니다.
Opera에서는 border-image에 접두사 -o-가 필요합니다.
Safari에는 box-shadow에 -webkit- 접두사가 필요합니다.
Opera는 새로운 테두리 속성을 지원합니다.
CSS3 둥근 모서리
CSS2에 둥근 모서리를 추가하는 것은 까다로웠습니다. 우리는 각 각도마다 다른 이미지를 사용해야 했습니다.
CSS3에서는 둥근 모서리를 만드는 것이 쉽습니다.
CSS3에서는 둥근 모서리를 만드는 데 border-radius 속성이 사용됩니다.
이 블록은 모서리가 둥글어요!
CSS3 컨테이너 섀도우
CSS3에서는 box-shadow 속성을 사용하여 컨테이너에 그림자를 추가합니다.
CSS3 테두리 이미지
CSS3 border-image 속성을 통해 이미지를 사용하여 테두리를 만들 수 있습니다.
border-image 속성을 사용하면 이미지 테두리를 지정할 수 있습니다!
테두리를 만드는 데 사용된 원본 이미지는 귀하의 것입니다.
새 테두리 속성
테두리 속성
테두리 속성, 태그
