CSS를 사용하여 구호 효과 얻기

이번에는 CSS를 사용하여 릴리프 효과를 얻는 방법을 보여 드리겠습니다. CSS를 사용하여 릴리프 효과를 얻는 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

머리말

최근 바이두 지도를 보다가 효과를 봤는데, 웹페이지에서 사용하면 꽤 좋을 것 같아서 연구해 봤습니다.

효과 그림은 다음과 같습니다:

엠보싱 효과를 사용하려면 텔레스코픽 박스(flex)에 대한 지식이 필요합니다.

flex는 크롬에서 완벽하게 지원되므로 -webkit- 접두사를 추가해야 하며 일부 다른 브라우저에서는 지원되지 않습니다. CSS 매뉴얼을 직접 확인하세요. 오늘은 주로 양각 효과를 만드는 방법에 대해 이야기하고 싶습니다.

먼저 코드를 첨부하세요:

<p class="title">
        <p class="word">生活服务</p>
        <p class="relief">
            <p class="border"></p>
        </p>
    </p>

body,p{
     padding: 0;
     margin: 0;
 }
.title{
    font-size: 15px;
    font-family: "Microsoft Yahei", "Trebuchet MS", Arial, Helvetica, sans-serif;
    display: -webkit-flex;
    -webkit-align-items: center;
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.word{
    -webkit-flex: 0 0 auto;
    padding-right: 10px;
}
.relief{
    -webkit-flex: 1;
}
.border{
    height: 0;
    width: 100%;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

그런 다음 만든 효과를 첨부하세요:

매우 실용적인 효과

플렉스 스타일 분석:

display:-webkit-flex 플렉스 박스에 대한 컨테이너 제공

-webkit-align-items:

flex-start: 시작 위치의 경계 Flex 상자 요소의 가로 축(세로 축) 행의 교차 축 시작 경계에 가깝습니다.

flex-end: 플렉스박스 요소의 교차축(세로축) 시작 위치의 경계가 행의 교차축 끝 경계에 가깝습니다.

center: Flexbox 요소는 행의 교차축(세로축) 중심에 있습니다. (행의 크기가 Flexbox 요소의 크기보다 작은 경우 양방향으로 동일한 길이로 오버플로됩니다.)

-webkit-flex: 복합 속성. flexbox 모델객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색합니다.

none:

none 키워드의 계산된 값은 다음과 같습니다. 0 0 auto

[ flex-grow ]: 플렉스 박스 요소의 확장 비율을 정의합니다. (공간 할당권한 정의)

[flex-shrink]: 플렉스박스 요소의 축소율을 정의합니다. (오버플로되면 추가 공간이 비례하여 소화됩니다.)

[ flex-basis ]: 플렉스 박스 요소의 기본 기준 값을 정의합니다. (요소의 너비 값을 정의합니다. 지정하지 않을 경우 요소 자체의 너비 값에 따라 다름)

마지막으로 테두리에 테두리 속성을 설정하면 부조 효과 연출이 완성됩니다

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

추천 자료:

마우스를 위로 움직일 때 아이콘을 회전시키는 CSS

CSS3를 사용하여 빛나는 사각형 테두리 만들기

CSS3을 사용하여 원활한 스크롤 효과의 무한 루프 만들기

위 내용은 CSS를 사용하여 구호 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!