집 > 기사 > 웹 프론트엔드 > CSS3는 다양한 테두리 효과를 만듭니다.

CSS3는 다양한 테두리 효과를 만듭니다.

php中世界最好的语言원래의: 2018-05-07 17:39:241678검색

이번에는 CSS3를 사용하여 다양한 테두리 효과를 만드는 방법을 알려드리겠습니다. CSS3를 사용하여 다양한 테두리 효과를 만들 때 사용하는 주의사항은 무엇인지 살펴보겠습니다.

반투명 테두리

구현 효과:

구현 코드:

<p>
你能看到半透明的边框吗？
</p>
p {
    /* 关键代码 */
    border: 10px solid rgba(255,255,255,.5);
    background: white;
    background-clip: padding-box;
    /* 其它样式 */
    max-width: 20em;
    padding: 2em;
    margin: 2em auto 0;
    font: 100%/1.5 sans-serif;
}

구현 포인트:

테두리를 반투명으로 설정합니다. 이는 기본적으로 반투명 테두리를 아직 볼 수 없음을 의미합니다. 을 사용하면 테두리가 있는 영역의 하위 레이어까지 배경이 확장됩니다. 즉, 테두리의 바깥쪽 가장자리에 의해 배경이 잘립니다.

Background-clip: padding-box(초기값은 border-box)를 설정하면 배경이 테두리가 있는 아래쪽 영역까지 확장되지 않습니다. 즉, padding의 바깥쪽 가장자리를 사용합니다. 배경을 자르세요.

다중 테두리

구현 효과:

구현 코드:

<p></p>
/* box-shadow 实现方案 */
p {
    /* 关键代码 */
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
    /* 其它样式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}
/* border/outline 实现方案 */
p {
    /* 关键代码 */
    border: 10px solid #655;
    outline: 5px solid deeppink;
    
    /* 其它样式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

구현 지점:

box-shadow 구현은 box-shadow(확장 반경)의 네 번째 매개변수를 사용합니다. 양수 확장 반경에 오프셋 2개와 흐림 값 0을 더한 결과 "투영"은 실제로 실선 테두리처럼 보입니다. 쉼표 분리 구문을 지원하는 상자 그림자를 사용하면 원하는 수의 그림자를 만들 수 있으므로 여러 테두리 효과를 얻을 수 있습니다.

테두리/윤곽선 구현은 테두리를 사용하여 테두리 레이어를 설정한 다음 윤곽선을 사용하여 테두리 레이어를 설정하는 것입니다. 이 솔루션은 점선 테두리를 구현할 수 있지만 두 개의 테두리 레이어만 구현할 수 있습니다.

둥근 모서리 테두리

성취 효과:

구현 코드:

<p>我有一个漂亮的内圆角</p>
p {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* 关键代码 */
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}

구현 포인트:

윤곽선은 요소의 둥근 모서리를 따르지 않습니다(따라서 직각을 표시함). 상자 - Shadow는 두 가지를 중첩함으로써 box-shadow(확장 값은 대략 border-radius 값의 절반과 동일)가 윤곽선과 컨테이너의 둥근 모서리 사이의 간격을 채우므로 우리는 무엇을 얻을 수 있습니다. 우리는 효과를 원합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!