구조
박스 경계 반경 둥근 : 5px / 20 %;
경계 반경 : 5px 4 픽셀 3px의 2 픽셀, 좌상, 우상, 우하, 좌하
박스 그림자 박스 그림자 : 그림자 박스, X 축, Y 축 그림자 흐림 반경 반경 그림자 색 불균일이 연장 돌출부 (그림자 색 번짐의 정도) 옵셋
참고 : 삽입이 상자 안에 그림자를 의미, 외부의 기본, 첫 번째 또는 마지막 매개 변수 위치에 기록 삽입, 다른 위치가 잘못되었습니다
값은 3 거리의 상부 측에서 왼쪽 인 경우, 그림자 색상 값은 좌측, 상측 거리 흐림 화소 그림자 색 4 거리이다
값은 가상 화소 그림자 색상의 상측에서 좌측으로부터 5이고,이 때 색 반전 내부에 표시되는
반대 방향으로 네거티브 값
배경
BACKGROUND 크기 배경 사이즈 자동 기본값 동일한 비율 길이 값 (200) (50) 다음에 폭과 높이 200 픽셀 50 픽셀의 화상 길이를 나타내는 값의 크기를 변경하지 않고 커버 채워진 용기 전체 외층
배경 타일 배경 반복
BACKGROUND 측위 위치 1 (배경 출처) 텍스트 위치 : 위치에 따라 콘텐츠 박스 프레임 : 여백의 위치에 따라서 경계 박스 : 패딩 박스 이 특성을 사용없이 반복 배경으로 설정해야
위치 위치 2 (배경 위치) 오른쪽 상단 좌측 하단 배경 위치 : 얼마나 많은 거리를 왼쪽과 오른쪽에서
BACKGROUND 다중 쉼표로 구분 : 배경 화상을 : URL (이미지 / bg_flower.gif), URL (이미지 / border.png) 배경 반복 없음 반복;
글꼴
텍스트 그림자 텍스트 그림자 : 세 가지 값 : 왼쪽은 위쪽으로부터의 거리를 나타내고, 텍스트 그림자 색 음영 표시
텍스트 그림자 네 값 : 왼쪽, 위쪽에서 번짐 및 색 불균일의 정도의 거리를 나타낸다
텍스트 오버 플로우 속성 오버플로 : 숨겨진; 공백 : 파라미터 nowrap는, 텍스트 줄 바꿈하지 않는 최초의이 두 가지 속성을 강제로 설정
텍스트 오버 플로우 클립 : 트림 텍스트입니다. 줄임표 : 텍스트 표현하기 위해 생략 잘린 기호를 표시 사용자 정의 (문자열) : 기호들의 정의는 텍스트의 특정 문자열을 표현하는 것은 손질 된
텍스트 속성 단어 휴식을 랩 : 단어 휴식 : 휴식-의 모든 내용은 200 픽셀로 포장 할 줄 끝에 긴 영어 단어 (등 축하)가있는 경우, 그 행의 마지막에 단어를 자릅니다 conra (축의 전단 부)이며
후방 단부의 다음 행동 tulation (conguatulation).
워드 브레이크 : 단어 휴식, 차이가 줄의 끝이 넓은만큼 전체 단어를 표시하지 않는 경우는 다음 줄에 자동으로, 전체 전체 단어를 단어 단위 축 하 것입니다, 말씀이 차단되지 않습니다 .
서버에 글꼴 스타일을 소개 @ 글꼴 얼굴 {글꼴 - 가족 : 글꼴 이름, SRC : 서버에있는 글꼴 파일 경로}
RGBA 색상과 투명도 opcity
R : 레드 G : 녹색, B : 블루 알파 : 투명성 매개 변수
RGB는 0 내지 1이 아닌 음의 값의 범위는 0 ~ 255/0 ~ 100 % 범위 인 알파
0 ~ 1의 범위 opcity
그라디언트 색상
배경 이미지 : 선형 구배 (바닥, 레드 #의 FFF);
파라미터 설명 : 첫 번째 파라미터는 오른쪽으로, 위에서 아래 그래디언트 방향을 지정 좌측 ...... 가기 왼쪽에
지정된 시작 및 종료 값 이상의 색상을 가질 수있다 : 두 번째 및 세 번째 인자 색 배경 이미지 (선형 구배 바닥 # FFF가, 블랙, 적색);
그림
(타원 세트) 50 % : 이미지 경계 반경 둥근
최대 폭에 대응 사진 : 100 %; 높이 : 자동;
사진 그림자 상자 그림자
사진 필터 코드 아래에 설명 된대로
회전
2D 변환 : 로테이션 () - 회전, 내부 회전 각 괄호 쓰기 기본 시계 방향 회전을 제외 소자 시계 반대 방향으로 회전 할 수 있도록.
()을 변환 - 브라켓 X, Y 값을 현재의 위치로부터 이동. (30 픽셀, 30 픽셀)을 번역 : 마이너스 값 변환 반대 방향으로 이동 허용 30 픽셀, 오른쪽 원래 저장 위치로 하방으로 30 픽셀
스케일 () - 괄호 폭의 변동의 요인에 의해 원래의 크기 변화는 복수의 높이가 변화 : 스케일 (2,4) : 폭이 두배, 높이 배로
) (경사 - 수평 및 수직 방향의 비틀림 각 브래킷 수평, 꼬인 수직 비틀림 각도 변환 : 스큐 (30deg를 0deg) 측 방향 비틀림 DIV는 30 개도, 텍스트 내부 토션을 따를
변환 : 스큐 (0deg, 30deg)를 ] DIV 길이 트위스트 30도, 텍스트 내부 비틀림이 따를
변환 : 스큐 (30deg, 30deg)를 , 측면 따를 텍스트 내부 트위스트 DIV 길이 트위스트 30 °, 30 ° 트위스트
rotateX ()을 변환 3D - 수평축 X를 따라 수직 괄호 회전 반전 기록 도로
rotateY은 () - 가로 세로 축 Y 플립 브래킷을 따라 회전 각도 쓰기
2D와 3D의 차이 3D 변환 변환 2 차원과의 차이는 : 해당 2 차원 평면에서 변환 및 텍스트를 다시 볼 수없는
3D의 변환이 수행 점유하며 반전 회로 (Z 축에 관한) 공간 전후 수행 미러 효과에 해당한다.
코드 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aa{
width: 100px;
height: 100px;
/* border: 1px solid; */
/* background-color: rgba(220,230,242,1);/*最后一位是透明度 */
/* opacity: 1;0到1设置透明度 */
background-image: linear-gradient(to bottom,#fff,red,blue);/* 背景渐变 */
transform: rotate(8deg);
transform:translate(30px,30px);
transform:skew(30deg,0deg);
}
img{
border-radius: 50%;/* （设置椭圆形） */
max-width: 100%;height: auto;
box-shadow:2px 2px #0000FF;
transform: rotate(8deg);
}
img:hover{
transform: rotate(8deg) translate(30px,30px) scale(1.1,1.1);;
/* transform:scale(2,4); */
/* 模糊效果 blur*/
/* filter: blur(4px); */
/* 高亮效果 */
/* filter: brightness(0.30); */
/* 对比度 */
/* filter: contrast(180%); */
/* 灰色图像 */
/* filter:grayscale(100%); */
/* 色相旋转 */
/* filter: hue-rotate(180deg); */
/* 反转输入图像 */
/* filter: invert(100%); */
/* 透明度 */
/* filter: opacity(50%); */
/* 饱和度 */
/* filter: saturate(7); */
/* 深褐色 */
/* filter: sepia(100%); */
/* 阴影效果 */
filter: drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
<img src="../祝庆迎zuoye10.28/img/5.jpg" >
<div class="aa">
</div>
</body>
</html>
效果
