>  기사  >  웹 프론트엔드  >  CSS 스타일 그림, 그라디언트 및 관련 지식 요약

CSS 스타일 그림, 그라디언트 및 관련 지식 요약

高洛峰
高洛峰원래의
2017-03-07 14:22:251286검색

1. 배경 위치: (사진 위치 지정)

세 가지 작성 방법:

1): % 비율에 따르면 왼쪽 상단이 가장 작고(0%, 0%) 오른쪽 하단이 가장 큽니다(100%, %100)
2): (x, y) 왼쪽 위 모서리가 가장 작고(0, 0), 오른쪽 모서리가 가장 작습니다. 아래쪽 모서리가 가장 큽니다(최대, 최대)
3) 위쪽, 가운데, 왼쪽, 오른쪽, 아래쪽; >

2. background-clip: 1, 해당 부분의 값 포함: border; 🎜>3, background-origin:

1, 값 시작 부분: border content; , 배경 이미지가 고정되어 있는지 아니면 페이지의 나머지 부분과 함께 스크롤되는지 여부입니다. 1, 스크롤: 페이지의 나머지 부분과 함께 스크롤합니다.

2, 고정: 창의 특정 위치에 고정됩니다.

5, 그라데이션:

1, 선형 그라데이션: 선형-그라디언트:

1) 각도인 경우: 각도, 전환 색상 ;
2) 상단인 경우. . . , 방향 앞에 추가하고 뒤에 전환 색상을 추가합니다.

2, 방사형 그라데이션: 방사형-그라디언트:

1) 기본값은 중심점 그라데이션입니다. 2) [왼쪽 상단의 크기]: 크기는 그라데이션 반경입니다. 3, 그라디언트 반복 :

1) 선형 그라디언트 반복 : Repeating-linear-gradient : 형식은 선형 그라디언트와 동일합니다.

2) 방사형 그래디언트 반복: reoeating-radial-gradient: 형식은 방사형 그래디언트와 동일합니다.

위 CSS 스타일 사진과 그라데이션, 관련 지식(꼭 읽어야 할 내용)은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 홈페이지를 응원해주시기 바랍니다.

더 많은 CSS 스타일 사진, 그라디언트, 관련 지식 요약 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.