CSS 테두리 길이를 제어하는 ​​방법에 대한 샘플 코드 공유

CSS 테두리 길이 제어

CSS 테두리 길이 제어. 예전에는 테두리 길이가 컨테이너보다 작아야 할 때 p 중첩을 사용했습니다. 나중에 나는 의사 클래스 가 이 효과를 달성하는 데 매우 편리하다는 것을 알았습니다. 또한, padding 및 margin을 조정하는 것도 번거롭지 않습니다. .

border top

border left

border right

border Bottom

.box-container {
    position: relative;
    width: 90%;
    color: #777;
}

.border-top {
    background: #b4bcbf;
    padding: 15px;
}

    .border-top:before {
        content: '';
        position: absolute;
        left: 42%;
        top: 0;
        bottom: auto;
        right: auto;
        height: 7px;
        width: 50%;
        background-color: #8796a9;
    }

.border-left {
    background: #dfdad6;
    padding: 15px;
}

    .border-left:before {
        content: '';
        position: absolute;
        left: 0;
        top: 6%;
        bottom: auto;
        right: auto;
        height: 52%;
        width: 5px;
        background-color: #a89d9e;
    }

.border-right {
    background: #eee9c4;
    padding: 15px;
}

    .border-right:after {
        content: '';
        position: absolute;
        left: auto;
        top: auto;
        bottom: 5px;
        right: 0;
        height: 52%;
        width: 5px;
        background-color: #f39c81;
    }

.border-bottom {
    background: #bcdc9d;
    padding: 15px;
}

    .border-bottom:after {
        content: '';
        position: absolute;
        left: 18px;
        top: auto;
        bottom: 0;
        right: auto;
        height: 6px;
        width: 105px;
        background-color: #32b66b;
    }

효과는 다음과 같습니다:

@

위 내용은 CSS 테두리 길이를 제어하는 ​​방법에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!