border-radius@3 둥근 테두리
속성 설명: 객체의 둥근 테두리 설정 또는 가져오기, 복합 속성
문법 템플릿:
border-radius：[ <length> | <percentage> ]{
1,4} [ / [ <length> | <percentage> ]{
1,4} ]?
기본값: 개별 속성별로 설정
속성 값 설명:
<length>：用长度值设置对象的圆角半径长度，不允许负值;
<percentage>：用百分比设置对象的圆角半径长度，不允许负值;
적용 가능한 요소: 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 각각의 독립적인 속성에 따라 설정
스크립트 인터페이스: borderRadius
참고: 매개변수로 구분된 2매개변수를 제공합니다 . 각 매개변수는 매개변수 값을 설정할 수 있습니다 . 첫 번째 매개변수는 수평 반경을 나타내고, 세 번째 매개변수는 수직 반경을 나타냅니다. 첫 번째 매개변수가 생략되면 기본값은 첫 번째 매개변수입니다.2“/”1~4122
- 수평 반경: 4개의 매개변수 값이 모두 제공되면 4개 모서리에 왼쪽 위
top-left, 오른쪽 위top-right, 오른쪽 아래bottom-right, 왼쪽 아래 순서로 작용합니다 .bottom-left - 하나만 제공하면 네 모서리 모두에 사용됩니다.
top-left두 개를 제공하는 경우 첫 번째는 왼쪽 상단 과 오른쪽 하단 에 사용되고bottom-right두 번째는 오른쪽 상단top-right과 왼쪽 하단에 사용됩니다.bottom-left- 3개가 제공되면 첫 번째는 top left 에 사용되고 , 두 번째는 top right 및 lower left
top-left에 사용되고 , 세 번째는 lower right 에 사용됩니다.top-rightbottom-leftbottom-right - 수직 반경도 위의
4점을 따릅니다.
국경-왼쪽 위-반경@3
속성 설명: 개체의 왼쪽 상단 모서리 둥근 테두리를 설정하거나 가져옵니다.
문법 템플릿:
border-top-left-radius：[ <length> | <percentage> ]{
1,2}
기본값: 0
속성 값 설명:
<length>：用长度值设置对象的左上角(top-left)圆角半径长度，不允许负值;
<percentage>：用百分比设置对象的左上角(top-left)圆角半径长度，不允许负值;
적용 가능한 요소: 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 예
**스크립트 인터페이스: **borderTopLeftRadius
참고:2 매개변수는 공백으로 구분하여 제공하며 , 각 매개변수 에 매개변수 값을 2설정할 수 있습니다 . 첫 번째 매개변수는 수평 반경, 세 번째 매개변수는 수직 반경을 나타내며, 생략 시 기본값은 매개변수 값 입니다.11221
border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius속성은 border-top-left-radius 속성과 동일하므로 여기서는 설명하지 않습니다.
box-shadow@3 객체 그림자
속성 설명: 객체 그림자 설정 또는 가져오기
문법 템플릿:
box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{
2,4} && <color>?
기본값: none
속성 값 설명:
none：无阴影;
<length>①：第1个长度值用来设置对象的阴影水平偏移值，可以为负值;
<length>②：第2个长度值用来设置对象的阴影垂直偏移值，可以为负值;
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值，不允许负值;
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值，可以为负值;
<color>：设置对象的阴影的颜色;
inset：设置对象的阴影类型为内阴影，该值为空时，则对象的阴影类型为外阴影;
적용 가능한 요소: 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 예, 내부 그림자와 외부 그림자 간 전환 시 제외
스크립트 인터페이스: boxShadow
참고: 여러 효과 세트를 설정할 수 있으며 각 매개변수 값 세트는 쉼표로 구분됩니다.
border-image@3이미지 테두리
속성 설명: 이미지로 채울 객체의 테두리 스타일을 설정하거나 가져오는 복합 속성
문법 템플릿:
border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>
기본값: 개별 속성별로 설정
속성 값 설명:
/***css3中添加的新属性***/
적용요소 : 각각의 독립된 속성에 따라 설정
상속 가능 여부: 없음
애니메이션 여부: 각각의 독립적인 속성에 따라 설정
스크립트 인터페이스: borderImage
참고: 이미지 재정의를 사용하여 <border-style>테두리 스타일을 정의하세요. <border-image>이거나 none이미지가 보이지 않을 때 에서 <border-style>정의한 테두리 스타일 효과가 표시됩니다.
테두리 이미지 소스
속성 설명: 이미지 경로를 사용하여 개체의 테두리 스타일을 설정하거나 가져옵니다.
문법 템플릿:
border-image-source：none | <image>
기본값: none
속성 값 설명:
none：无背景图片;
<image>：使用绝对或相对地址指或者创建渐变色来确定图像;
적용 가능 요소 :<border-collapse> 로 설정된 테이블 요소를 collapse제외한 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 아니요
스크립트 인터페이스: borderImageSource
국경-이미지-슬라이스@3
속성 설명: 개체의 테두리 배경 이미지 분할 방법을 설정하거나 가져옵니다.
문법 템플릿:
border-image-slice：[ <number> | <percentage> ]{
1,4} && fill?
기본값: 100%
속성 값 설명:
/***css3中添加的新属性***/
적용 가능 요소 :<border-collapse> 로 설정된 테이블 요소를 collapse제외한 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 아니요
스크립트 인터페이스: borderImageSlice
참고: 이 속성은 이미지를 상, 우, 하, 좌 방향으로 분리하고, 이미지를 모서리로 나누고 4, 4가장자리를 중간 영역과 공유하도록 지정합니다 9. 중간 영역은 항상 투명합니다(즉, 이미지가 없습니다.) 작성) 키가 추가되지 않은 경우 문자fill
테두리-이미지-너비@3
속성 설명: 개체의 테두리 두께를 설정하거나 가져옵니다.
문법 템플릿:
border-image-width：[ <length> | <percentage> | <number> | auto ]{
1,4}
기본값: 1
속성 값 설명:
<length>：用长度值指定宽度，不允许负值;
<percentage>：用百分比指定宽度，参照其包含块进行计算，不允许负值;
<number>：用浮点数指定宽度，不允许负值;
auto：如果auto值被设置，则 <border-image-width> 采用与 <border-image-slice> 相同的值;
적용 가능 요소 :<border-collapse> 로 설정된 테이블 요소를 collapse제외한 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 아니요
스크립트 인터페이스: borderImageWidth
참고: 이 속성은 자른 이미지를 전달하는 데 사용되는 테두리의 두께를 지정하는 데 사용됩니다. 이 속성은 생략 가능하며 외부 속성에 의해 <border-width>정의 됩니다.
국경-이미지-outset@3
속성 설명: 개체의 테두리 배경 이미지 확장을 설정하거나 가져옵니다.
문법 템플릿:
border-image-outset：[ <length> | <number> ]{
1,4}
기본값: 0
속성 값 설명:
<length>：用长度值指定宽度，不允许负值;
<number>：用浮点数指定宽度，不允许负值;
적용 가능 요소 :<border-collapse> 로 설정된 테이블 요소를 collapse제외한 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 아니요
스크립트 인터페이스: borderImageOutSet
참고: 이 속성은 테두리 이미지의 바깥쪽 확장에 의해 정의된 값을 지정하는 데 사용됩니다. 즉, 값이 이면 10px이미지가 원래 값을 기준으로 바깥쪽으로 확장된 10px후 표시 됩니다.
테두리-이미지-반복@3
속성 설명: 개체 테두리 이미지의 타일링 방법을 설정하거나 가져옵니다.
문법 템플릿:
border-image-repeat：[ stretch | repeat | round | space ]{
1,2}
기본값: stretch
속성 값 설명:
stretch：指定用拉伸方式来填充边框背景图;
repeat：指定用平铺方式来填充边框背景图，当图片碰到边界时，如果超过则被截断;
round：指定用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框;
space：指定用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框;
적용 가능 요소 :<border-collapse> 로 설정된 테이블 요소를 collapse제외한 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 아니요
스크립트 인터페이스: borderImageRepeat
참고: 이 속성은 테두리 배경 이미지의 채우기 방법을 지정하는 데 사용됩니다. 0-2매개변수 값은 수평 및 수직 방향으로 정의할 수 있습니다 . 2값이 같으면 으로 병합할 수 있는데 이는 1테두리 배경 이미지가 가로, 세로 방향 모두 동일하게 채워지는 것을 의미하고, 2값이 둘 다 이면 stretch생략 가능하다. .
개요 개요
속성 설명: 개체 윤곽선의 특성을 설정하거나 가져옵니다.
**기본값:**표시하지 않음
**일반 설명:** 대부분의 내용이 테두리와 동일합니다.
특수 속성 값:
outline-offset: [length]px;
轮廓线的偏移量，正值向外偏移，否则向元素内部偏移
caret-color 光标的颜色
outline：<outline-width> || <outline-style> || <outline-color>
<outline-width>：指定轮廓边框的宽度;
<outline-style>：指定轮廓边框的样式;
<outline-color>：指定轮廓边框的颜色;
**사용 시나리오:**입력 텍스트 상자의 깜박이는 테두리에 윤곽선을 사용할 수 있습니다.
알아채다:
- 등고선은 장식선이라고도 하는데 공간을 차지하지 않아 겹쳐지는데, 겹치지 않게 하고 싶다면 여백 값을 설정하면 됩니다.
- 아웃라인과 관련된 속성은 레이아웃 공간을 차지하지 않으며 요소의 크기에 영향을 미치지 않지만 계단식 현상을 유발하기도 합니다.
outlines직사각형이 아닐 수 있음- , , , 유사 속성
<border>으로 분할하는 것은 허용되지 않습니다.<border-top><border-right><border-bottom><border-left> - 윤곽선 속성은 윤곽선 너비, 윤곽선 스타일, 윤곽선 색상 속성으로 확장될 수 있으며 그 특성은 테두리와 유사하므로 여기서는 설명하지 않습니다.
추가 예: 삼각형
- 암호
<head>
<style>
div{
width: 0px;
height: 0px;
border-style: solid;
border-width: 40px;
border-color: black yellow transparent rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<div></div>
</body>
-
해결책
테두리를 굵게 표시하고 콘텐츠 크기를 0으로 설정하여 콘텐츠가 없도록 합니다. 테두리는 전체 컨테이너를 차지하며 테두리의 한쪽 또는 양쪽만 유지하여 삼각형을 표시합니다(인접 여백의 경사 문제는 설명됨) 위에)
외곽선-오프셋@3
속성 설명: 개체 외부의 선 윤곽선 오프셋 컨테이너 값을 설정하거나 가져옵니다.
문법 템플릿:
outline-offset：<length>
기본값: 0
속성 값 설명:
/***css3中添加的新属性***/
적용 가능한 요소: 모든 요소
상속 가능 여부: 아니요
애니메이션 여부: 예, 값이 다음과 <length>같은
스크립트 인터페이스: outlineOffset
참고: 경계는 참조점으로 outline-offset사용되며 처음부터 양수 값은 경계에서 바깥쪽으로 확장되고 음수 값은 경계에서 안쪽으로 줄어듭니다.border0borderborder
## 상자 크기@3
속성 설명: 설정 또는 가져오기
문법 템플릿:
box-sizing：content-box | border-box
기본값: content-box
속성 값 설명:
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型;
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )此属性表现为怪异模式下的盒模型;
적용 가능 요소 : <width> 허용 하는 모든 <height>요소
상속 가능 여부: 아니요
애니메이션 여부: 아니요
스크립트 인터페이스: boxSizing