프런트 엔드 페이지에 0.5픽셀을 그리는 방법 소개
- 巴扎黑원래의
- 2017-08-12 15:04:581733검색
이 글에서는 주로 웹 프런트엔드에서 0.5픽셀을 그리는 여러 가지 방법을 소개하는데, 이는 메타 뷰포트, 테두리 이미지, 배경 이미지 및 변환: scale()을 사용하여 구현됩니다. 완료 회사에서 주선한 모바일 웹 터치스크린 개발 과정에서 모바일 기기에 선을 표시하는 작업이 있었습니다. 처음에는 PC에서 흔히 사용하는 CSS 보드 속성을 사용하여 1픽셀 선을 표시했지만 보기에 좋지 않은 것으로 나타났습니다. 모바일 장치에서 Taobao를 참조하면 JD.com의 터치 스크린은 모두 모바일 장치에 표시하기 위해 얕고 얇은 선을 사용하는 것으로 나타났습니다.
다음은 0.5픽셀 선을 그리는 좀 더 편리한 네 가지 방법에 대한 기록입니다
1. 타오바오 터치스크린에서도 사용하는 방식인 메타 뷰포트 방식을 사용하세요일반적으로 사용되는 모바일 HTML 뷰포트 설정은 다음과 같습니다. Follows
5b61a1055ff6c630acb831e78efe1165
4fdfe337458e3038d8b35505bf1809e1
具体意思就不多提，它就是让页面的高宽度即为设备的高宽像素，而为了方便绘制0.5像素的viewport的设置如下
ab78f60ad90ed1bdcb55f160fc5ee64e
这样html的宽高就是设备的2倍，此时依然使用css board为1像素的话，肉眼看到页面线条就相当于transform:scale(0.5)的效果，即为0.5像素
但是这种方式涉及到页面整体布局规划以及图片大小的制作，所以若采用这个方式还是事先确定为好
二、采用 border-image的方式
这个其实就比较简单了，直接制作一个0.5像素的线条和其搭配使用的背景色的图片即可
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;
}
</style>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</html>三、采用background-image的方式
我这里采用的是渐变色linear-gradient的方式，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);
background-image: linear-gradient(bottom,red 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom right;
</style>
</head>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</body>
</html>linear-gradient(bottom,red 50%,transparent 50%);的意思是从底部绘制一个渐变色，颜色为红色，占比为50%，而总宽度已经设置为100%而总高度为一个像素background-size: 100% 1px；b10f397eb03d383ee797b50ab31f582f
둘째, 테두리 이미지 방법을 사용하세요
실제로는 비교적 간단합니다. 0.5 크기의 사진을 생성하면 됩니다. 픽셀 라인과 이에 어울리는 배경색<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
position: relative;
}
p:last-child:after {
position: absolute;
content: '';
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: red;
-webkit-transform: scale(1,0.5);
transform: scale(1,0.5);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
</style>
</head>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</body>
</html>🎜🎜셋, 배경 이미지 방식을 사용합니다🎜🎜🎜저는 여기서 사용합니다. 그라디언트 색상의 선형 그라데이션 방식입니다🎜🎜🎜🎜rrreee 🎜linear-gradient(하단,빨간색 50%,투명50%); 아래쪽부터 그라데이션 색상을 그린다는 뜻으로 색상은 빨간색으로 비율은 50%로 전체 너비가 설정되었습니다. 100%로 설정하고 전체 높이는 1픽셀입니다. background-size: 100% 1px; 🎜🎜이것은 0.5픽셀 라인을 표시합니다🎜🎜🎜 4. 변환 사용: scale() 메소드🎜🎜🎜는 높이를 조정하는 것입니다. 코드는 다음과 같습니다🎜🎜🎜🎜rrreee위 내용은 프런트 엔드 페이지에 0.5픽셀을 그리는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!