안 드 로 이 드 에서 0.5px 라인 의 원리 분석 실현
border: 0.5px크기 를 통 해 이 루어 져 야 한다.원리:위조 원소 의 폭 을 200%로 설정 하고,height 를 1px 로 설정 하여
-webkit-transform:scale를 통 해 배로 축소 하면 border 0.5 의 테 두 리 를 얻 을 수 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div{
width: 100%;
height: 100px;
border-top: 1px solid aqua;
posititon:relative;
}
.div::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
box-sizing: border-box;
width: 200%;
height: 1px;
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>효과 표시:
안 드 로 이 드 에서 0.5px 라인 을 실현 하 는 원리 분석 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 안 드 로 이 드 가 0.5px 라인 을 실현 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
