H5 모바일 단말을 위한 매우 실용적인 CSS3 시뮬레이션 테두리의 최신 연구 예제 코드

머리말

이전 블로그 게시물에서 "모바일 "섹션 5: 경계 처리의 H5 기본 지식 요약"에서 box-shadow:0 0 0 1px #ddd;을 사용하여 경계를 시뮬레이션할 수 있다고 언급했습니다. 물론 블로그 게시물의 내용이 틀린 것은 아니지만 특정 제한 사항이 있습니다. 그래서 오늘은 이전 블로그 글의 단점을 수정하고 개선해보겠습니다.

테두리를 직접 작성하지 않고 시뮬레이션하는 이유는 무엇인가요? 테두리는 상자 모델을 계산해야 하기 때문에 모바일 단말기에서는 적응형 레이아웃을 사용할 수 있습니다.
따라서 테두리를 시뮬레이션하는 방법을 사용하면 테두리의 너비를 고려할 필요가 없어 더욱 편리합니다.
물론
과 같은 속성을 사용하여 box-sizing:border-box 상자 모델에 테두리가 포함되지 않도록 제외할 수도 있습니다. 그리고 이 방법은 많은 최신 CSS 프레임워크에서 사용됩니다.
하지만 박스 모델에는 패딩이 포함되어 있지 않기 때문에 개인적으로 이 접근 방식을 권장하지 않습니다.
아무튼 저는 이런 접근 방식이 마음에 들지 않아서 테두리를 시뮬레이션해봤습니다!

이전 글 리뷰

위 링크 열기 싫으시면 읽어보세요. 뭐, 여기에서는 두 가지 주요 시뮬레이션 방법을 요약해 보겠습니다. 이해가 되셨다면 다음 내용을 읽어보시면 됩니다. 방법 1

테두리 시뮬레이션

outline을 사용하여 테두리를 시뮬레이션합니다.

장점:outline: 1px solid #ddd;

1. 🎜> 선형

2. 테두리에서 상자까지의 거리를 조정할 수 있습니다 매개변수
border단점:
outline-offset1. 이는 W3C에서 BUG로 간주되며, 가까운 시일 내에 수정될 수 있습니다.)

2. 한 면만 추가하는 것이 아니라 한 번에 4면에만 추가할 수 있습니다.

방법. 2
테두리 시뮬레이션

외부 광선 시뮬레이션 테두리 사용box-shadow장점:

1. 완벽한 테두리box-shadow:0 0 0 1px #ddd;2. 매개변수 반복 가능, 여러 테두리 생성

단점:
1. 점선이 아닌 직선만 가능

자세한 내용은 , 제 이전 블로그 글이나 바이두 관련 정보를 참고해주세요.

어느 방향으로든 테두리를 시뮬레이션할 수 있습니다

원래 불가능하다고 생각했던 CSS 실력이 아니네요. 충분히 강하고 열심히 공부해야합니다.

지난번에는 할 일이 없었고 DEMO를 보기 위해 p를 사용하여 영숫자 표 세트를 작성했지만 관련 지식 포인트를 사용했지만 여전히 의존하지 않았습니다.

`box-shadow`오늘 곰곰이 생각해 보니

는 네 가지 모서리 중 어느 쪽도 시뮬레이션할 수 있는 것 같아서 이 블로그 글을 쓰게 되었습니다.

언어가 너무 많기 때문에 코드를 직접 보는 것이 좋습니다:

html code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <p class="box sibian"></p>
    <p class="box shangbian"></p>
    <p class="box xibian"></p>
    <p class="box zuobian"></p>
    <p class="box youbian"></p>
    <p class="box zuoshangbian"></p>
    <p class="box youshangbian"></p>
    <p class="box zuoxiabian"></p>
    <p class="box youxiabian"></p>
    <p class="box wushangbian"></p>
    <p class="box wuyoubian"></p>
    <p class="box wuxiabian"></p>
    <p class="box wuzuobian"></p></body></html>

로그인 후 복사

box-shadowCSS code

.box {width: 100px;
height: 100px;background: #f00; 
margin: 50px;float: left;}
.sibian {box-shadow: 0 0 0 5px #000;}
.shangbian {box-shadow: 0 -5px #000;}
.xibian {box-shadow: 0 5px #000;}
.zuobian {box-shadow: -5px 0 #000;}
.youbian {box-shadow: 5px 0 #000;}
.zuoshangbian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000;}
.youshangbian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000;}
.zuoxiabian {box-shadow: -5px 5px #000,-5px 0 #000,0 5px #000;}
.youxiabian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000;}
.wushangbian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000,-5px 5px #000,-5px 0 #000;}
.wuyoubian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,-5px 5px #000,0 5px #000;}
.wuxiabian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,5px -5px #000,5px 0 #000;}
.wuzuobian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000,5px 5px #000,0 5px #000;}

로그인 후 복사

상자 그림자 보기 시뮬레이션 테두리 DEMO

요약

필요에 따라 지속적으로 채울 수 있는

의 무한 반복 기능을 사용합니다.

그리고
은 두 가지 값만 설정할 수 있으므로 확장, 흐림, 일대일 이동이 없습니다. 단점은 여전히 존재합니다. 즉, 실선만 시뮬레이션할 수 있고 점선은 시뮬레이션할 수 없다는 것입니다. box-shadow
둥근 모서리를 사용할 경우 더 나은 계산이 필요합니다. 어쨌든 을 사용하는 것이 가장 쉽습니다. 다중 오버레이 기능
box-shadow
box-shadow

위 내용은 H5 모바일 단말기 매우 실용적인 CSS3 시뮬레이션 국경 최신 연구 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!