> 웹 프론트엔드 > CSS 튜토리얼 > CSS의 힘: div로 그림 그리기

CSS의 힘: div로 그림 그리기

伊谢尔伦
풀어 주다: 2016-11-23 09:25:28
원래의
1561명이 탐색했습니다.

이 그림들은 모두 DIV를 사용하여 그린 것입니다. 사실 원리는 복잡하지 않습니다.


CSS의 힘: div로 그림 그리기

이러한 그림은 CSS로 그려지고 배경 이미지 오버레이를 통해 구현되며,

버섯 머리 등이 구현됩니다. 방사형 그라데이션 방사형 그라데이션과 선형 그라데이션 선형 그라데이션을 중첩하여 구현합니다. 예:

p {
  width: 170px;
  height: 140px;
  background-image:
        radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
        linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
        radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
        radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
        radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
        linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
        border-radius: 140px 140px 80px 80px;
}
로그인 후 복사

동시에 :before 및 배경 이미지를 통해 전면 및 후면 폐색 관계가 있습니다. : 의사 요소를 수행한 후.

온라인 데모: http://jsfiddle.net/ourjs/ed0ayybo/

PS: 이 방법은 IE 이전 버전을 완전히 지원하지 않습니다

원본 주소: http : //a.singlep.com/?utm_source=ourjs.com

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿