border 정리

1. border 속성

border : 굵기px 스타일(solid, dotted, dashed ,,, ) 색상;

.p1{
   border: 2px solid blue;
   }

2. box-sizing:border-box ;

박스 사이즈가 고정 되어 width, height 값으로 일정해진다

해당 조건을 안넣어주면 패딩, border 두께에 따라 영역크기가 바뀐다.

항상 넣어주자.

.p1{
  border-style: dotted;
  border-color: red;
  border-width: 5px;
  
  box-sizing: border-box;
  }

 

3. 테두리 위,아래,좌,우 각각 설정

.p1 {
  border-top: 3px dotted #4d9fff;
  border-bottom: 2px dashed red;
  border-left: 5px solid green;
}

오른쪽 값을 안줘서 오른쪽이 없는 border

4. 테두리 없애기

<input> 옆의 input 태그 등의 기본 테두리를 제거할 수 있다.

1. border: none;
2. border: 0;

 

5. 모서리 둥글게, 배경 색 투명하게

border-radius: 10px;

background-color: transparent; 기본 값이지만 사용할 때 써준다.
background-color: red;   색상 입히기 가능

 

6. 그림자 입히기 box-shadow

box-shadow: none; (기본값)

box-shadow: 가로px  세로px  (투명도px)  (그림자두께px)  색상;

투명도, 그림자 두께는 선택사항

box-shadow: 10px 5px red;

 

7-1) 영역 자체의 투명도 opacity

opacity: 투명도; 

투명도:  선명 1.0 <-- 0.5 반투명 --> 0.0 투명

원하는 값을 입력한다.

.p1{
	opacity: 0.3;
    }

7-2) opacity 마우스 오버 투명도 설정

이미지인 경우

img.opacity : hover

img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}