CSS3 프레임
원각은 웹 페이지를 영원히 돌릴 수 없는 화제이다. 이전에는 기본적으로 배경 그림을 통해 만들었는데 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개의 매개 변수 설정이 있습니다.
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 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.