집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 구호 효과 얻기

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

php中世界最好的语言원래의: 2018-03-22 09:41:184112검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!