이 글에서는 단면 그림자, 불규칙 투영, 염색체 효과, 젖빛 유리 효과, 모서리 효과 등 CSS3의 새로운 기능에 대한 시각 효과를 소개합니다.
1 , 단면 그림자
1. box-shadow 속성 적용, 형식: h-shadow v-shadow 흐림 확산 색상 삽입 속성 값 소개 h-sahdow: 위치 수평 그림자, 음수 값 허용
①v-shadow: 수직 그림자의 위치, 음수 값 허용
②blur: 흐림 거리
3spread: 그림자의 크기, 확장 거리, 음수 가능
④color: 그림자의 색상
⑤inset/outset: 내부 또는 외부 그림자
2. 그림자의 확장 거리 그림자는 네 면 모두에 유효하며 한쪽에만 적용할 수는 없습니다.
3. box-shadow는 여러 값 세트가 동시에 적용되도록 설정을 지원합니다
샘플 코드:
.wrap{ width: 200px; height: 120px; background: yellowgreen; box-shadow: 2px 0px 4px -2px black, -2px 0px 4px -2px black; }
2. 불규칙한 투영
1. border-radius로 생성된 형상을 이용하면 투영은 좋지만 의사요소와 반투명 장식이 추가되어 그림자 성능이 매우 좋지 않으며 다음과 같은 상황에서 문제가 발생합니다.
① 반투명 이미지, 배경 이미지 또는 테두리 이미지
② 요소는 점선, 점선 또는 반투명 테두리를 설정하지만 배경이 없습니다(또는 배경 클립이 테두리가 아님- box 언제)
③ 의사 요소를 사용하여 생성된 요소 내부에 작은 모서리가 있습니다.
④ 클립 경로로 생성된 모양
해결 방법: svg
샘플 코드:
.wrap{ width: 200px; height: 120px; border: 6px dotted yellowgreen; --box-shadow: 0px 0px 4px 0px black; -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1)) }
3.
1. 필터 구현에 따라 필터 속성의 해당 값을 적용하여 이미지의 채도, 밝기 및 기타 값을 조정합니다2. 최소 블렌드 모드 구현에서 역할은 요소 콘텐츠와 배경을 구현하는 것이며 다음 요소는 "혼합"됩니다3. 기본 배경 블렌드 모드 구현, 기능: 혼합을 구현합니다. 배경색 및 배경 이미지, 배경 이미지 및 이미지세 가지 상황에 대한 샘플 코드:.wrap1{ width: 200px; height: 120px; overflow: hidden; } .wrap1 > img{ max-height: 100%; max-width: 100%; -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg); } .wrap2{ width: 200px; height: 120px; background: hsl(335, 100%, 50%); overflow: hidden; } .wrap2 > img{ height: 100%; width: 100%; mix-blend-mode: luminosity; } .wrap3{ width: 200px; height: 120px; background-size: cover; background-color: hsl(335, 100%, 50%); background-image: url("../img/cat.png"); background-blend-mode: luminosity; }
4. 젖빛 유리 효과
주요 구현 원리: 콘텐츠 의사 요소 배경은 기본 배경과 동일한 이미지이며 필터를 추가합니다:흐림 흐림 필터. 흐림 효과는 기본 배경에 적용할 수 없으며 요소의 배경에도 적용할 수 없으며(이로 인해 요소 자체가 흐려지고 텍스트가 보이지 않게 됩니다) 의사 요소에만 사용할 수 있습니다. . 코드는 다음과 같습니다.body{ background: url("../img/cat.png") no-repeat; background-size: cover; } .wrap{ position: relative; width: 500px; margin: 0px auto; padding: 10px; line-height: 1.5; background: hsla(0, 0%, 100%, .3); overflow: hidden; } .wrap::before{ content: ''; background: url("../img/cat.png") 0/cover fixed; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); z-index: -1; margin: -30px; }코드 설명: 1. 둘 다 동일하게 적용됩니다. body 및 Wrap 의사 요소 배경 이미지 2. Wrap의 배경 첨부는 고정으로 설정되어 스크롤 시 배경 이미지가 움직이지 않습니다. 3. 랩의 요소는 절대 위치로 설정되어 있고 z-인덱스 레벨은 배경보다 더 높습니다 4. 블러를 사용하여 랩 의사 요소의 블러 크기를 설정합니다 5. 사용 음수 여백 값을 사용하여 너비를 늘리고 상위 요소에 대해overflow:hidden을 사용하여 오버플로를 숨겨 흐린 배경을 더욱 사실적으로 만듭니다.
5. 코너 효과
구현 단계1. 먼저 선형 그라데이션을 사용하여 코너 자르기 효과를 얻은 다음 선형을 사용합니다. -gradinet를 사용하여 삼각형을 생성하고 위치, 너비 및 높이를 설정합니다. 코드는 다음과 같습니다..wrap{ background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em, linear-gradient(-135deg, transparent 1.4em, #58a 0); width: 200px; height: 120px; }
참고
1. 100% 0/2em 2em은 배경 요소의 위치, 너비, 높이를 지정하는 것이며, 특히 2em의 너비와 높이는 일반적인 너비입니다. 배경 요소의 2. 두 번째 선형 그라데이션의 1.4em은 그라데이션 축을 따라 측정됩니다. 이는 그라데이션 축에서 요소의 상단 가장자리까지의 거리입니다. 3. 왼쪽 아래로 그라디언트가 왼쪽 아래에서 시작된다는 의미입니다. 위 내용이 이 글의 전체 내용이기를 바랍니다. 모든 분들의 학습에 도움이 되며, 또한 모든 분들이 PHP 중국어 웹사이트를 지지해주시기를 바랍니다. 새로운 CSS3 기능의 시각 효과와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!