웹 페이지div 보기 - 테두리에 음영을 주고 모서리를 매끄럽게 만들기

DIV 테두리가 너무 단조롭다고요?
당신의 DIV 테두리에 음영을 넣으세요. 테두리를 충실하게 하고 페이지를 아름답게 하려면 반드시 필요합니다.

테두리를 미화한 후에 직접 음영을 나타내는 것이 약간 튀어나온 것을 발견하였으므로 페이지에 과도 효과를 추가하는 것을 고려할 수 있다

.main{
    /*    */    
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box; /* Opera */
    transition: all 0.3s linear;/*0.3s    */
    -moz-transition: all 0.3s linear; /* Firefox 4 */
    -webkit-transition: all 0.3s linear; /* Safari   Chrome */ 
}

설정이 끝난 후main 수식의 라벨이 바뀌면 0.3s의 효과 과도 시간이 발생합니다.
전환 시간이 있으면 우리는 전환을 추가하여 필터를 보여줄 수 있다

.main:hover{
    /*  */
    border: solid 1px rgba(102, 146, 191, 0.68);
    /*    */
    border-radius: 10px;
    box-shadow: 7px 15px 30px #285a63;
}

이때 멈출 때 음영 효과가 강화됩니다. 여기div의 미화는 성공했습니다. 여러분은 이해하셨습니까? 문제가 있거나 이해하지 못하시면 댓글로 남겨주세요.
미화된 div와 배경색이 잘 어울려요. 배경색 수정 링크를 붙여드릴게요.
https://blog.csdn.net/qq_36120267/article/details/81705148
제가 직접 만들면 바로 효과를 볼 수 없을 수도 있어요. 저도 완성품 페이지를 잘 보여드릴게요.
http://listar.top/vip