CSS3 프레임

1、border-radius
원각은 웹 페이지를 영원히 돌릴 수 없는 화제이다. 이전에는 기본적으로 배경 그림을 통해 만들었는데 CSS3이 생기면 간단한 속성으로 해결할 수 있고border-radius를 통해 요소의 원각 반경을 설정할 수 있다.

border-radius: 5px;

정사각형border-radius를 가장자리 길이의 반으로 설정하면 원이 됩니다.

width: 100px;
height: 100px;
border-radius: 50px;

border-radius는 줄임말 형식으로 사실border-radius는border 속성과 마찬가지로 각 각을 단독으로 분리할 수 있다. 즉, 다음과 같은 네 가지 쓰기 방법이다.

border-top-left-radius:   
border-top-right-radius:   
border-bottom-right-radius:  
border-bottom-left-radius:

속성 값의 첫 번째 값은 둥근 수평 반지름이고 두 번째 값은 둥근 수직 반지름이며 두 번째 값이 생략되면 첫 번째 값과 같습니다. 이 각도는 4분의 1의 둥근 각도이며 임의의 값이 0이면 둥근 각도가 아닙니다.
2、border-image
테두리는 모두 선이 약간 단조로워 보이기 때문에 CSS3의border-image 속성을 사용하면 그림을 테두리의 수식으로 사용할 수 있습니다.
border-image 속성은 다음과 같은 속성을 설정하는 약자 속성입니다.

border-image-source  //           。
border-image-slice  //         。
border-image-width  //        。
border-image-outset  //             。
border-image-repeat  //          (repeated)、  (rounded)   (stretched)。

3、box-shadow
box-shadow 속성은 상자에 그림자를 하나 이상 추가합니다.

box-shadow:inset x-offset y-offset blur-radius spread-radius color

box-shadow 속성에는 최대 6개의 매개 변수 설정이 있습니다.

그림자 유형: 이 매개 변수는 선택할 수 있는 값으로 값을 설정하지 않으면 기본 투영 방식은 외부 그림자입니다.유일한 값인 inset을 얻으면 외음영을 내음영으로 바꾸는 것이다

X-offset: 음영의 수평 편이량을 가리키는데 그 값은 양과 음으로 할 수 있고 값이 양이면 음영이 대상의 오른쪽에 있고 반대로 음영이 음으로 할 때 음영이 대상의 왼쪽에 있다

Y-offset: 음영의 수직 편이량을 가리키며 그 값도 양과 음으로 할 수 있다. 만약에 양수라면 음영은 대상의 밑에 있고 반대로 음영이 음수일 때 음영은 대상의 꼭대기에 있다

섀도우 흐림 반지름: 이 매개변수는 선택 사항이지만 값은 양수값일 수 있습니다. 값이 0일 경우 섀도우가 흐림 효과가 없으며 값이 클수록 섀도우의 가장자리가 흐림

섀도우 확장 반지름: 이 매개변수는 양수 음수 값을 선택할 수 있습니다. 양수 값을 지정하면 전체 섀도우가 확대되고 음수 값을 지정하면 축소

섀도우 색상: 이 매개 변수는 색상을 설정하지 않으면 브라우저에서 기본 색상을 사용하지만 브라우저마다 기본 색상이 다릅니다

.
box-shadow는 한 개 이상의 투영을 사용할 수 있으며, 여러 개의 투영을 사용할 때 쉼표로 분리해야 합니다.

box-shadow: 3px 3px 3px orange, 3px 3px 3px red;

4、box-sizing
전통적인 박스 모델 width는 내용 영역의 넓이를 가리키며padding,border와 관계가 없다.하지만 이는 포석에 어느 정도 어려움을 가져올 수 있다.
box-sizing은 박스 모델을 변경할 수 있습니다.

content-box：     
border-box：width = content width + paddingLeft + borderLeft + paddingRight + borderRight

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS3 프레임

좋은 웹페이지 즐겨찾기