css 두 모금

1, 테이블 모서리를 동그랗게

table {
        border-collapse: collapse;
/*         border: 2px solid #96a9fe; box-shadow와 동시 적용 가능하나, 모서리 동그랗게 처리 시 비적용됨*/
        box-shadow: 0 3px 5px #96a9fe, 0 2px 4px #96a9fe;
        border-radius: 7px;
        overflow: hidden; /* 둥근 모서리를 적용하기 위해 추가 */
    }

th, td {
        border: 1px solid #c2c2c2;
        padding: 5px;
    }

2, 버튼에 마우스 댔을 때 음영 추가

.button {
    color: #ffffff;
    text-align: center;
    background-color: #96a9fe;
    border: none;
    border-radius: 3px;
    padding: 4px;
    min-height: 30px;
    min-width: 70px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.button:hover {
    color: #654de0;
    background-color: #dee1fd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

❔ chat gpt에게 box-shadow 쓸까, filter: drop-shadow 쓸까 물었을 때 자세히 비교해줬다.
답변 내용이 꽤 알차서 그냥 넘기기는 아깝더라고~!

box-shadow

• 요소의 테두리(box)에 그림자를 추가합니다.
• 그림자의 위치, 흐림 정도, 색상, 투명도를 설정할 수 있습니다.
• 그림자는 요소의 크기와 위치에 따라 변화합니다.
  ➡️ 일반적으로 요소의 사각형 경계에 그림자를 추가하는 데 사용됩니다. 단순하고 일반적인 그림자를 추가할 때 적합합니다.

filter: drop-shadow

• 요소 자체의 형태에 맞춘 그림자를 추가합니다.
• 필터 효과의 일종으로, 그림자가 요소의 경계에 맞게 적용됩니다.
• 그림자의 위치, 흐림 정도, 색상을 설정할 수 있습니다.
  ➡️ 요소의 실제 모양을 따라가는 그림자를 추가합니다. 더 복잡한 형태의 요소(예: 투명한 부분이 있는 이미지)에 적합합니다.