박스 테두리에 그림자를 주는 box-shadow 속성
box-shadow박스에 그림자 효과를 주는 속성 입니다.
블록태그로 만든 박스에 그림자 효과를 주는 속성 입니다.
box-shadow:rgba(0, 0, 0, 0.41) 2px 2px; 이렇게 속성자 안에 속성과값을 정의 해 주는데요
rgba(0, 0, 0, 0.41) 2px 2px; 여기에 정의된 rgb속성은 색의 삼원색을 의미 하며
r은red 색상 g는green색상 b는blue 색상을 의미 하는 것입니다.
그리고rgba 의 a 는 그림자의 선명도값을 의미 하는 것입니다.
style.css
<style>
.ppk{
position:relative;left:0px;
width:300px;
height:100px;
border:1px solid gray;
border-radius:0.3em;
background:orange;
padding:10px;
text-align:left;
box-shadow:rgba(0,0,0,0.41)3px 3px;
}
</style>
html 코딩
<div class="ppk">
box-shadow:rgba(0,0,0,0.41)3px 3px;
</div>
결과)box-shadow:rgba(0,0,0,0.41)3px 3px;
위처럼 이렇게 box-shadow:rgba(0, 0, 0, 0.41) 3px 3px; 속성과 값을 주게 되면 회색 톤으로 우측측면과 하단부에 각각3픽셀 만큼의 굵기로 그림자선을 만들어 주게 되는 것입니다.
box-shadow:rgba(0,0,0,0.41)-2px -2px,2px 2px;
box-shadow:rgba(0, 0, 0, 0.41)-2px -2px,2px 2px; 네 면에 똑같이 그림자가 주어 지게 됩니다.
box-shadow:rgba(0,0,0,0.41)-3px -3px;
box-shadow:rgba(0, 0, 0, 0.41) -3px -3px;이 값으로 하면 상단면과 좌측면에 그림자가 생성됩니다.
box-shadow:rgba(200,0,0,0.41)3px 3px;
box-shadow:rgba(200, 0, 0, 0.41) 3px 3px;red 색상이 두드러진 그림자가 생성됩니다.
box-shadow:rgba(0,200,0,0.41)3px 3px;
box-shadow:rgba(0, 200, 0, 0.41) 3px 3px;green색상이 두드러진 그림자가 생성됩니다.
box-shadow:rgba(0,0,200,0.41)3px 3px;
box-shadow:rgba(0, 0, 200, 0.41) 3px 3px;blue색상이 두드러진 그림자가 생성됩니다.
box-shadow:rgba(0,0,0,1)3px 3px;
box-shadow:rgba(0, 0, 0, 1) 3px 3px;명도 선에 가까운 뚜렸한 그림자가 생성됩니다.
box-shadow:rgba(0,0,0,0.1)3px 3px;
box-shadow:rgba(0, 0, 0, 0.1) 3px 3px;명도 가장 희미한 그림자가 생성됩니다.