아야
1. 마우스를 웹 페이지로 이동시키면 사라집니다 = =
*{ 커서: 없음!중요; }2. 단순한 텍스트 블러 효과
*{ 색상: 투명; 텍스트-섀도우: #111 0 0 5px; }![]()
3. 다중 경계
.div { 박스-그림자: 0 0 0 6px RGBA(0, 0, 0, 0.2), 0 0 0 12px RGBA(0, 0, 0, 0.2), 0 0 0 18px RGBA(0, 0, 0, 0.2), 0 0 0 24px RGBA(0, 0, 0, 0.2); 높이: 200px; 마진: 50px 자동 가로: 400px}![]()
4. 실시간으로 CSS 편집
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. CSS에서의 단순 연산
.div{ 너비: calc(100% - 500px); }![]()
6, 국경 반경
기본적으로 많은 사람들이 이렇게 사용하기 때문입니다:
.div { border-radius: 4px; }![]()
조금 더 고급스러운 느낌은 이렇습니다:
.div { border-radius: 4px 6px 6px 4px; }![]()
하지만 궁극의 흑인 기술이 사용되는 방식은 다음과 같습니다:
.div { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
border-radius 8가지 값을 할당할 수 있습니다:
슬래시의 앞쪽은 수평 방향에 영향을 주고, 슬래시의 뒤쪽은 수직 방향에 영향을 줍니다.
각 숫자는 네 가지 방향을 나타냅니다.
7, 윤곽선 오프셋
입력 항목에서 CSS를 작성할 때는 다음 문장들을 익숙하게 될 것입니다:
input { 개요 : 없음; }입력:집중 { 개요 : 없음; 이게 입력 입력 박스에서 기본 파란색 와이어프레임을 제거하는 방법입니다.
CSS에는 기본 와이어프레임의 거리를 설정할 수 있는 아웃라인-오프셋 속성도 있습니다:
입력 { 아웃라인-오프셋: 4px ; }(웹 프론트엔드 학습 교환 그룹: 328058344 잡담 금지, 마음에 들지 않는 한 들어오지 마세요! 속성 값을 조정하면 윤곽선의 거리 변화를 볼 수 있습니다.
마지막으로, 사실 전에 빅 화이트의 시범을 소개하겠습니다
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> 몸 { 배경: #595959; } #baymax{ /*는 중앙*/여백: 0 auto로 설정됨; /*높이*/ 높이: 600px; /*넘침 숨김*/ 넘침: 숨겨져 있다; } #head{ 높이: 64px; 너비: 100px; /*둥근 모서리의 형태를 백분율*/테두리 반지름: 50%로 정의하세요; /*배경*/ 배경: #fff; 마진: 0 자동; 여진-하단: -20px; /*하단 테두리 스타일 설정*/ 테두리-하단: 5px 솔리드 #e0e0e0; /*속성은 요소의 스택 순서를 설정합니다; 더 높은 스택 차수를 가진 원소는 항상 더 낮은 스택 차수를 가진 원소들보다 앞에 위치합니다** / z-인덱스: 100; /*상대적 위치 원소 생성*/ 위치: 상대; } #eye, #eye2{ 너비: 11px; 높이: 13px; 배경: #282828; 국경-반경: 50%; 위치: 친척; 상단: 30px; 왼쪽: 27px; /*원소를 회전시키세요*/변환: 회전(8deg); } #eye2{ /*대칭적으로 회전하게 만들기*/ 변환: rotate(-8deg); 왼쪽: 69px; 상단: 17px; } #mouth{ 너비: 38px; 높이: 1.5px; 배경: #282828; 위치: 친척; 왼쪽: 34px; 상단: 10px; } /*몸통과 복부*/ #torso, #belly{ 여백: 0 auto; } 높이: 200px; 가로: 180px; 배경: #fff; 국경 반경: 47%; /*테두리 설정*/ 테두리: 5px 실색 #e0e0e0; 테두리-탑: 없음; Z 지수: 1; } #belly{ 높이: 300px; 너비: 245px; 마진-상단: -140px; Z 지수: 5; } #cover{ 너비: 190px; 배경: #fff; 높이: 150px; 마진: 0 자동; 위치: 친척; 상단: -20px; 국경-반경: 50%; } /*하트*/ #heart{ 너비:25px; 높이: 25px; 경계 반경: 50%; 위치: 상대; /*테두리 주변에 그림자 효과를 추가*/ 박스-그림자:2px 5px 2px #ccc 인셋; 오른쪽: -115px; 상단: 40px; Z 지수: 111; border:1px 솔리드 #ccc; } /*팔*/ #left팔, #right팔{ 높이: 270px; 너비: 120px; 국경-반경: 50%; 배경: #fff; 마진: 0 자동; 위치: 친척; 상단: -350px; 왼쪽: -100px; 변속: 회전(20도); Z 지수: -1; } #right-arm{ transform: rotate(-20deg); 왼쪽: 100px; 상단: -620px; } /*손가락*/ #l-빅핑거, #r-빅핑거{ 높이: 50px; 가로: 20px; 국경-반경: 50%; 배경: #fff; 위치: 친척; 상단: 250px; 왼쪽: 50px; 변속: 회전(-50도); } #r-빅핑거{ 왼쪽: 50px; 변속: 50도 회전; } #l-스몰핑거, #r-스몰핑거{ 높이: 35px; 가로: 15px; 국경-반경: 50%; 배경: #fff; 위치: 친척; 상단: 195px; 왼쪽: 66px; 변속: 회전(-40도); } #r-스몰핑거{ 배경: #fff; 변속: 회전(40도); 상단: 195px; 왼쪽: 37px; } /*허벅지*/ #left다리, #right다리{ 높이: 170px; 너비: 90px; 경계-반경: 40% 30% 10px 45%; 배경: #fff; 위치: 친척; 상단: -640px; 왼쪽: -45px; 변환: 회전(-1도); Z 지수: -2; 마진: 0 자동; } #right-leg{ 배경: #fff; 국경-반경: 30% 40% 45% 10px; 마진: 0 자동; 상단: -810px; 왼쪽: 50px; 변환: 회전(1도); </style><body> } <div id="baymax"> <!-- 두 개의 눈을 포함한 머리를 정의하세요, 입 --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="입"></div> </div> <!-- 몸통을 정의하고, 심장도 포함한다 --> <div id="torso"> <div id="heart"></div> </div> <!-- 배, 복부, 덮개(그리고 몸통의 접합부)를 정의한다 --> <div id="배"> <div id="cover"></div> </div> <!-- 왼팔을 정의하세요. 두 손가락, 하나는 큰 손가락, 하나는 작은 손가락으로 구성되어 있습니다 --> <div id="왼팔"> <div id="l-큰 손가락"></div> <div id="l-smallfinger"></div> </div> <!-- 오른팔을 정의하세요. 여기에는 큰 손가락과 작은 손가락 하나도 포함됩니다 --> <div id="오른팔"> <div id="r-빅핑거"></div> <div id="r-smallfinger"></div> </div> <!-- 왼쪽 다리를 정의합니다 --> <div id="왼쪽 다리"></div> <!-- 오른쪽 다리 --> <div id="오른쪽 다리"></div> </div></body><html>![]()
|
게시됨 2017. 12. 4. 오후 8:24:39
|
|
|
|
게시됨 2017. 12. 5. 오전 9:10:05
|
게시됨 2017. 12. 5. 오전 9:21:19
