역경계 반경 효과 만들기

질문:

역경계 반경 효과를 만들 수 있습니다 모서리가 곡선으로 나타나는 곳에서 효과를 얻을 수 있습니다. inward?

답변:

기본 CSS의 border-radius 속성은 반전 효과를 초래할 수 있는 음수 값을 허용하지 않습니다. 그러나 다음은 CSS를 사용하는 대체 접근 방식입니다.

컨테이너 내에 4개의 추가 요소를 추가하여 경계를 약간 넘어 확장되도록 합니다. 이러한 요소는 페이지의 배경색과 일치해야 하며 아래에 페이지 콘텐츠가 있는 것처럼 보이도록 해야 합니다. 이러한 요소를 모퉁이 주위에 전략적으로 배치하고 테두리 반경을 적용하여 반전 효과를 얻습니다.

코드 조각:

#main {
    margin: 40px;
    height: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }