Css 투명도, shadow 섀도우, border-radius 속성

투명도

background-color：hsla（0,23%,56%,1）；

opacity 투명도 설정, 전체 상자에 대한 투명도 설정

하위 상자는 상위 상자의 투명도를 계승.out{ width: 200px; height: 200px; background: green; border: 1px solid darkgreen; margin: 40px auto; opacity: 0.3; } 하위 상자도 투명.out .inner{ width: 100px; height: 100px; background-color: yellow; }

background-color: transparent; 완전 투명, 조절 불능

rgba를 사용하여 색을 제어하는데opacity에 비해 계승성이 없음

2. 텍스트
text-shadow - 오프셋, 흐림, 색상(투명도 설정 가능)을 개별적으로 설정할 수 있습니다. 예를 들면 다음과 같습니다.

text-shadow: 5px 5px 2px #ccc;

속성 값 설명:

수평 오프셋 양수 양수 오른쪽과 음수 왼쪽

수직 오프셋 양수 음수 값 상향

모호도는 마이너스

가 될 수 없습니다.

객체 섀도우의 색상 설정

자세한 내용은 다음과 같습니다.
5px 수평 편이량.양수 오른쪽과 음수 왼쪽으로 5px 수직 편이량입니다.양수 값이 아래로 음수 값이 2px 올라가면 음수 값이 클수록 음수 값이 희미해집니다 #ccc는 대상의 음영 색을 설정합니다.여러 개의 그림자가 있을 수 있어요.
3. 둥근 테두리(border-radius 속성)
border-radius 속성, 속성 값은 원각의 반경, 반경이 클수록 원각의 정도가 크다
방법은 다음과 같습니다.

boder-top-left-radius：30px；      //   

boder-top-right-radius：30px；     //   

boder-bottom-left-radius：30px；   //   

boder-bottom-right-radius：30px；  //   

만약 이 네 개의 호도의 원각이 같다면 다음과 같이 쓸 수 있다. border-radius：30px；border-radius: 값을 부여하는 수량은 여러 가지 다른 것을 설정할 수 있다.

하나의 매개 변수는 위쪽의 네 개의 원각 호도가 같다는 것이다. border-radius：30px；

두 개의 매개 변수는 첫 번째 매개 변수는 왼쪽 상단, 오른쪽 하단의 원각 반경, 두 번째 매개 변수는 오른쪽 상단, 앉은 원각 반경: border-radius：30px 20px；

세 가지 파라미터는 각각 왼쪽 상/오른쪽 상+왼쪽 하/오른쪽 하단의 원각 반경: border-radius：30px 20px 10px;

네 개의 매개 변수의 순서는 왼쪽 상/오른쪽 상/오른쪽 하/왼쪽 하의 원각 반경(왼쪽 위에서 시계 방향으로 시작): border-radius： 40px 30px 20px 10px ;