CSS3 UI 수정 - 검토

1. box-shadow 속성은 상자에 하나 이상의 그림자를 추가합니다.
구문: box-shadow: h-shadow v-shadow 흐림 확산 색상 삽입
h-shadow가 필요하며 수평 그림자의 위치, 음수 값이 허용됩니다.
v-shadow는 필수이며, 수직 그림자의 위치, 음수 값은 허용됩니다.
　　blur 선택적 흐림 거리.
스프레드는 선택사항, 그림자의 크기입니다.
색상은 선택사항, 그림자 색상입니다.
삽입은 선택 사항이며 외부 그림자(아웃셋)를 콘텐츠 단계 그림자로 변경합니다.
예:

　　
　　

　　　　
　　　
Figure

　　

　

예:

box-shadow: 4px 4px 3px #000 inset; }

> 결과: 그림과 같이

　

2.border-radius

요소는 둥근 테두리를 추가합니다. 구문: border-radius: 1-4 길이 % / 1-4 길이 %; 참고: 네 가지 값의 순서는 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리입니다. 왼쪽 하단.

테두리 반경: 2em 1em 4em / 0.5em 3em;

동등 항목:
3em ;
border-bottom-right-radius:4em 0.5em;
border-bottom-left- radius:1em 3em;
border-radius는 백분율 값 %
을 지원합니다. 예:
style>
.radius-test1 { width: 100px; height: 100px;
margin: 0 auto; : 50px 솔리드 #cd0000;
　　border-radius: 50%; }
　　　
　　　

　　　 결과: 표시됨

　　　　

3.border-image

요소 테두리 배경 속성을 ​​설정하는 데 사용됩니다. Border-image-source 테두리에 사용되는 이미지의 경로 border-image-slice image border Offset inward Border-image-width 이미지 테두리의 너비
Border-image-outset The 테두리 이미지 영역이 테두리를 초과하는 양
Border-image-repeat 이미지 테두리가 타일링(반복)되는지 여부
기본적으로 둥글거나 늘어납니다.
테두리는 테두리 이미지를 9개의 부분으로 나눕니다: border-top-image, border-right-image
border-bottom-image, border-left-image, border-top-left-image
border -오른쪽 위 이미지, 테두리 아래 왼쪽 이미지,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 손 아래로 앞으로 앞으로 in in in\ ​​
　🎜>
예: (타일형 반복)
반복;}

　>

　

결과: 표시된 것과 같음

>

4.

그라데이션 그라데이션



선형-그라디언트(선형 그래디언트)와 방사형-그라디언트(방사형 그래디언트)로 구분됩니다

　 선형-그라디언트

구문 배경: -webkit-linear-gradient(top,#ccc, #000); 매개변수: 총 3개의 매개변수가 있습니다. 첫 번째 매개변수는 선형 그래디언트의 방향을 나타내며, 위쪽은 위에서 아래로,

　　　　　left는 왼쪽에서 오른쪽으로 정의되는 경우입니다. 상단은 왼쪽 상단부터 오른쪽 하단까지를 의미합니다.

두 번째와 세 번째 매개변수는 각각 시작점 색상과 끝점 색상입니다. 예시: Background:-webkit-linear-gradient(left ,　　　　　　red 50px, yellow 200px) }　　　

예시 ：각도를 입력할 수 있습니다

그녀 in in in on the angle >> .gradient{폭:300px; 높이: 180px;

배경:-webkit-linear-gradient(45deg,
　　　　　red 50px, yellow 200px);}
& lt;/style & gt;
& lt; p class = "geadient" & gt; & lt;/p & gt; 결과: 그림과 같습니다



방사형 그래디언트 방사형 그래디언트입니다. .gradient{폭:300px; 높이: 180px;
background:-webkit-radial-gradient
(원, 빨간색, 노란색, 녹색);}　　　
t ;
.gradient{너비:300px; 높이: 180px;

background:-webkit-radial-gradient(

ellipse, red, yellow, green);}　　　 >

　결과: 그림과 같습니다

　　　

　　　예: 다양한 크기의 키워드 사용.
side,blue,green,yellow ,black);}
　　　
　　　

　　 결과: 그림과 같습니다. Figure

　　　
　

　반복 방사형 그래디언트　　반사형 그래디언트를 반복하는 데는 Repeating-radial-gradient() 함수가 사용됩니다.

　예: ; -repeating-radial-

그라데이션(빨간색, 노란색 10%, 녹색 15%);}

;

결과: 그림과 같습니다

:25px;
　　　　overflow:hidden;border:1px
　　　solid #000;}
　　　.box{너비:400px;높이:30px;
　배경: -webkit-repeating-

　　　　　linear-gradient(15deg,green 0,

　　　　　 green 10px,#fff 10px,#fff　　　　　20px); hover .box{ 여백-

left:-100px;

> 결과: 그림과 같이


5

.Background-origin


상대적인 위치를 지정합니다. 배경 위치 속성 위치 지정
구문: background-origin: padding-box|border-box|content-box;
패딩 상자 배경 이미지는 패딩 상자를 기준으로 배치됩니다.  .Background_origin{너비: 300px;높이: 150px ;테두리: 1px 단색 검정색; 패딩: 35px; background-image:url('1.png')
　　

6. background-clip
배경의 그리기 영역을 지정합니다
값: border-box 배경이 테두리 상자에 잘립니다
Padding-box 배경이 패딩 상자에 맞게 잘립니다.
Content-box 배경이 콘텐츠 상자에 맞춰 잘립니다.
no-clip: 배경을 테두리 영역 바깥쪽으로 자릅니다.
예:
-clip:content-box;border:2px solid #92b901;}
　　

CSS3 UI 수정에 대한 자세한 내용은 검토하세요. 관련 내용은 PHP 중국어 웹사이트를 참조하세요. 조항!