전투에 도착 웹 프런트 엔드 : 둥근 모서리 CSS3 국경

1. CSS3 반올림

  • 국경 반경 속성

* - - 당신은 네 개의 국경의 최대 지정할 수 있습니다 복합 속성의 반경 속성을,이 속성은 요소로 둥근 모서리를 추가 할 수 있습니다!
구문 : 국경 반경 : 1-4 길이 | % / 1-4 길이 | %
호환성 : IE9 +, FireFox4 +, 크롬 , Safari5 +, 오페라

  • 다중 값

네 개의 값 : 왼쪽 위, 오른쪽 위, 오른쪽, 왼쪽 저급
세 값 : 왼쪽 위, 오른쪽 및 왼쪽 이하, 오른쪽 아래
두 값 : 상부 좌우 오른쪽 낮추고 좌하
값 : 동일한 네 라운딩 값

  • 확장 속성

보더 왼쪽 상단 반경 : 그것은 호의 좌상 구석 정의
보더 상단 오른쪽 반지름 : 아크의 오른쪽 상단에 정의
보더 하단 오른쪽 반지름 : 아크의 오른쪽 아래 정의
보더 하단 왼쪽 반경 : 그것은 아크의 왼쪽 하단 모서리를 정의

2. CSS3 상자 그림자

  • 상자 그림자 속성

하나 이상의 그림자 상자의
구문 : 박스 그림자 : H-V-그림자 색 그림자가 흐리게에서 삽입 된 전파;
(블러 퍼지 값을 확산, 삽입이 그림자에 변환 할 수있는 확산 값)
호환성 : IE9 +, FireFox4 + , 크롬, Safari5 +, 오페라

3. CSS3 국경 사진

  • 국경 이미지 속성

확장 버튼을 구축
국경 이미지 : 소스 슬라이스 폭 구문 처음부터 반복을,
호환성 : IE 호환되지 않는, 파이어 폭스, 크롬, Safari6 +, 오페라 호환

  • 확장 속성

국경 이미지 소스 : 지정 이미지는 테두리 스타일이 경계 스타일 속성에 의해 설정되는 대신, 사용하고자하는
구문 : 국경 이미지 소스 : 없음 | 이미지;

국경 이미지 -slice : 이미지가 지정된 경계 오프셋 안쪽
구문 : 국경 이미지 슬라이스 : 수 | % | 채우기;

국경 이미지 -width : 지정 이미지의 폭 경계
구문 : 국경 이미지 폭 : 수 | % | 자동;

국경 - 이미지 - 처음 : 지정 외부 경계의 양을 그려 국경 이미지 영역
구문 : 국경 - 이미지 - 처음 : 길이 | 번호;

국경 이미지 반복 : 이미지 경계를 반복 할 필요가있는 경우 (반복), 스트레칭 (뻗어) 또는 합류 (둥근)
구문 : 국경 이미지 반복 : 스트레치 | 반복 | 라운드 | 처음 | 상속;

추천

출처blog.51cto.com/14592820/2459097