[CSS] 그래픽 효과

그래픽 효과

/* 투명도 */
opacity: 1;

/* 박스 그림자 효과. 가로축, 세로축, 흐림정도, 색 */
box-shadow: 20px 20px 30px gray;

/* 텍스트 그림자 효과. 가로축, 세로축, 흐림정도, 색 */
text-shadow: 10px 10px 30px gray;

/* 박스 둥글게 설정 */
border-radius: 30px;
border-radius: 50%;

/* 배경 그라데이션: 방향, 출발색, 도착색 */
background: linear-gradient(to bottom, blue, red);
background: linear-gradient(to top, blue, red);
background: linear-gradient(to left, blue, red);
background: linear-gradient(to right, blue, red);
background: linear-gradient(45deg, blue, red);
background: radial-gradient(0.4, 0, 0, 0);

/* 필터효과 */
filter: blur(3px);
filter: brightness(0.5); /*  */
filter: contrast(100%);  /* 기본 100% */
filter: grayscale(0%);
filter: hue-rotate(0deg);
filter: invert(0%);      /* 색반전 */
filter: saturate(1);     /* 채도 */
filter: sepia(0%);       /* 갈색계열 */