H5 모바일 단말기 매우 실용적인 CSS3 시뮬레이션 국경 최신 연구 샘플 코드
- 黄舟원래의
- 2017-03-10 16:54:221880검색
H5 모바일 단말을 위한 매우 실용적인 CSS3 시뮬레이션 테두리의 최신 연구 예제 코드
머리말
이전 블로그 게시물에서 "모바일 "섹션 5: 경계 처리의 H5 기본 지식 요약"에서 box-shadow:0 0 0 1px #ddd;을 사용하여 경계를 시뮬레이션할 수 있다고 언급했습니다. 물론 블로그 게시물의 내용이 틀린 것은 아니지만 특정 제한 사항이 있습니다. 그래서 오늘은 이전 블로그 글의 단점을 수정하고 개선해보겠습니다.
이전 글 리뷰위 링크 열기 싫으시면 읽어보세요. 뭐, 여기에서는 두 가지 주요 시뮬레이션 방법을 요약해 보겠습니다. 이해가 되셨다면 다음 내용을 읽어보시면 됩니다. 방법 1테두리를 직접 작성하지 않고 시뮬레이션하는 이유는 무엇인가요? 테두리는 상자 모델을 계산해야 하기 때문에 모바일 단말기에서는 적응형 레이아웃을 사용할 수 있습니다.
따라서 테두리를 시뮬레이션하는 방법을 사용하면 테두리의 너비를 고려할 필요가 없어 더욱 편리합니다.
물론
과 같은 속성을 사용하여box-sizing:border-box상자 모델에 테두리가 포함되지 않도록 제외할 수도 있습니다. 그리고 이 방법은 많은 최신 CSS 프레임워크에서 사용됩니다.
하지만 박스 모델에는 패딩이 포함되어 있지 않기 때문에 개인적으로 이 접근 방식을 권장하지 않습니다.
아무튼 저는 이런 접근 방식이 마음에 들지 않아서 테두리를 시뮬레이션해봤습니다!
테두리 시뮬레이션
outline을 사용하여 테두리를 시뮬레이션합니다.
장점:outline: 1px solid #ddd;
2. 테두리에서 상자까지의 거리를 조정할 수 있습니다 매개변수border단점:
outline-offset1. 이는 W3C에서 BUG로 간주되며, 가까운 시일 내에 수정될 수 있습니다.)
방법. 2
테두리 시뮬레이션
외부 광선 시뮬레이션 테두리 사용box-shadow장점:
1. 완벽한 테두리box-shadow:0 0 0 1px #ddd;2. 매개변수 반복 가능, 여러 테두리 생성
단점:
1. 점선이 아닌 직선만 가능
어느 방향으로든 테두리를 시뮬레이션할 수 있습니다
지난번에는 할 일이 없었고 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 1px 테두리 만들기 box-shadow
위 내용은 H5 모바일 단말기 매우 실용적인 CSS3 시뮬레이션 국경 최신 연구 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!