CSS3 프레임

2411 단어
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
    

    좋은 웹페이지 즐겨찾기