情侣披露了劳作上的有的不开玩笑,说自己接连喜欢跟外人相比较

近年来和一个朋友闲谈,朋友披露了办事上的一部分不安心乐意,说自己总是喜欢跟人家比较,活得相比较累,那种感觉一大半人经历过,往往以为是自己心思不佳,其实不然,那是人性,此时应当快捷摆脱这种情状,想到DOTA大9神的笔录,游戏也是人生,领悟思考的人生才会频频敦促自己前进,详细我不明白了,大约意思是这么:人这一辈子就一遍,欢愉很重大,人怎么样感受到融融,说起来的确简单,有七个点,一点是“你可以让别人喜欢您”;其它一些是“跟好朋友一块时你可以卸掉面具”,是怎么着的就怎么样。希望能给不开玩笑的同窗寻找一丝扶助~

目录

 

您或许不知底的.5px

移动web设计中,在retina显示屏下网页会由1px会被渲染为2px,那么视觉稿中1px的线条还原成网页需求css定义为.5px。小说先导的卡通中,细心的设计师发现粗线条并吐槽,前端哥的说辞是因为css的border-width不帮忙.5px,所以用了1px来顶替,最终渲染为2px的粗线条,那些题目反复会被忽视,从而造成移动网页中普遍存在2px的粗线条。

retina下的网页1px被渲染为2px(甚至是3px,例如HUAWEI6 Plus),可参照的篇章《高清显示屏原理及设计方案

图片 1

漏洞极度多案例示范:微信-AA收款-详情页按钮,视觉稿给复苏的按钮边框是1px,重构上线后按钮边框是2px。

图片 2

此问题已优化,怎么样落到实处请往下看。

 

近年来和一个有情人聊天,朋友披露了工作上的部分不开玩笑,说自己一而再喜欢跟外人相比较,活得比较累,那种感觉半数以上人经历过,往往认为是团结心态不佳,其实不然,那是性情,此时应该急忙摆脱那种场所,想到DOTA大9神的笔录,游戏也是人生,理解思考的人生才会不停敦促自己发展,详细我不知晓了,大致意思是那样:人这一世就五遍,欢愉很要紧,人什么感受到欣喜,说起来的确简单,有四个点,一点是“你可以让外人喜欢你”;别的一些是“跟好朋友一道时您可见卸掉面具”,是怎么着的就如何。希望能给不快意的同桌寻找一丝帮助~

目录

 

兑现.5px的圆角边框

.5px的边框,看起来看神奇,这里谢谢蓝叔提供的法门。

规律:先定义1px的圆角边框,然后拉伸内容的肥瘦和冲天为父级的2倍(边框厚度不变),然后再使用transform:scale(0.5)缩放为原本的0.5倍

图片 3

图片 4😉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>点5测试 - border-radius</title>
<style type="text/css">
body{padding: 50px;-webkit-touch-callout:none;}
[class*="btn"]{margin: 0 auto;}
.btn-1 {
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
    border: 1px solid red;
}
.btn {
    position: relative;
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
}
.btn:before {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-style: solid;
    border-width: 1px;
    border-color: red;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
</style>
</script>
</head>

<body>

<div class="btn-1">1px border</div>
<br/><br/>
<div class="btn">.5px border</div>

</body>

</html>

图片 5😉

http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html

图片 6

即使你在chrome打开,会发现缩放线条会招致边框颜色变浅,但我们可以放心使用,因为在大部平移装备(相对高端)的颜料如故正常的。

http://www.cnblogs.com/PeunZhang/p/4709822.html

 

回到明天的大旨.5px(0.5px简写为.5px),可能大家听过.9,它是android平台选用软件开发里的一种新鲜图片形式,本文的.5指什么选择css完毕.5px的线条~

您或许不领会的.5px

移动web设计中,在retina显示器下网页会由1px会被渲染为2px,那么视觉稿中1px的线条还原成网页要求css定义为.5px。文章开首的卡通中,细心的设计师发现粗线条并吐槽,前端哥的理由是因为css的border-width不帮助.5px,所以用了1px来代表,最终渲染为2px的粗线条,那么些题材屡屡会被忽视,从而致使运动网页中普遍存在2px的粗线条。

retina下的网页1px被渲染为2px(甚至是3px,例如摩托罗拉6 Plus),可参看的小说《高清显示器原理及设计方案

图片 7

荒谬案例示范:微信-AA收款-详情页按钮,视觉稿给回复的按钮边框是1px,重构上线后按钮边框是2px。

图片 8

此题材已优化,怎么样贯彻请往下看。

 

实现.5px的线条

网络上有很多办法,如设置viewport,box-shawdow,border-image,background-image,transform:scale等,那里不做牵线(百度依旧谷歌(Google)“retina 1px
边框”有答案),本文只介绍一种认为相比好用的措施,一来包容性好,二来不重视图片。

transform:scale(x,y)

经过css协理定义border或者height为.5px大的线条,在android设备中的不能显示出来,那里有个小技巧,果设置线条为1px,然后通过transform:scale(x,y)来缩放线条为原本的一半,可显示0.5px的线条。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>点5测试 - scale</title>
<style type="text/css">
.line {
    height: 50px;
    line-height: 50px;
    background-color: #CCC;
    border-bottom:1px solid red
} 

.scale {
    position: relative;
    height: 50px;
    line-height: 50px;
    background-color: #CCC
}
.scale:after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background-color: red;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
</style>
</head>

<body>
<div class="line">1px</div>
<br/><br/>    
<div class="scale">0.5px</div>
</body>

</html>

http://peunzhang.github.io/demo/d5px/height-scale.html

图片 9

 

图片 10

图片 11

border值不辅助.5px吗

有局地同学利用boder-width:.5px后,在PC或者页面页面看不到.5px的边框(ios
8系统已完美协理border-width值0.5px线条),会认为border-width不扶助.5px,是否如此,大家先做个试验。

率先打开链接或者扫描二维码,体验demo

http://1.peunzhang.sinaapp.com/demo/d5px/border.html

图片 12

可以看出.5px的border在chrome浏览器上不突显线条,如下图:

图片 13

调大chrome分辨率后,.5px的border在PC浏览器上出示出线条,如下图:

图片 14

.5px的border在HUAWEI 6 plus下显得出线条,如下图:

图片 15

.5px的border在三星(三星(Samsung))galaxy s4 android 5.0.1下不突显线条,如下图:

图片 16

其他设备就不一一截图,有趣味的请测试,有惊喜,简单收拾如下表格:

图片 17

考查结果参考

  • css的border-width值协理.5px,突显状态受显示器分辨率的震慑
  • ios 8和winphone
    8的设施对高清屏做了异样处理,协理显得border-width:.5px
  • android
    大概所有的机型不帮助展现.5px的边框

除此以外,本文也对height值做了试验,结果跟border-width是一样的,大家仍能试验font-size、box-shadow等属性。

http://1.peunzhang.sinaapp.com/demo/d5px/height.html

图片 18

 

border值不襄助.5px吗 

有一对同学利用boder-width:.5px后,在PC或者页面页面看不到.5px的边框(ios
8系统已周密协理border-width值0.5px线条),会认为border-width不支持.5px,是或不是那样,我们先做个试验。

先是打开链接或者扫描二维码,体验demo

http://peunzhang.github.io/demo/d5px/border.html

图片 19

可以看出.5px的border在chrome浏览器上不呈现线条,如下图:

图片 20

调大chrome分辨率后,.5px的border在PC浏览器上显得出线条,如下图:

图片 21

 .5px的border在Motorola 6 plus下显得出线条,如下图:

图片 22

.5px的border在三星(Samsung)galaxy s4 android 5.0.1下不展现线条,如下图:

图片 23

其余设备就不一一截图,有趣味的请测试,有惊喜,简单收拾如下表格:

 图片 24

考试结果参考

  • css的border-width值扶助.5px,呈现状态受显示器分辨率的震慑
  • ios 8和winphone
    8的装置对高清屏做了特殊处理,协理显得border-width:.5px
  • android
    大概拥有的机型不支持显示.5px的边框

此外,本文也对height值做了考试,结果跟border-width是一模一样的,我们还足以试验font-size、box-shadow等特性。

http://peunzhang.github.io/demo/d5px/height.html

图片 25

归来明日的主题.5px(0.5px简写为.5px),可能大家听过.9,它是android平台运用软件开发里的一种特有图片格局,本文的.5指什么利用css达成.5px的线条~

落到实处.5px的圆角边框

.5px的边框,看起来看神奇,那里谢谢蓝叔提供的点子。

规律:先定义1px的圆角边框,然后拉伸内容的增幅和可观为父级的2倍(边框厚度不变),然后再使用transform:scale(0.5)缩放为原本的0.5倍

图片 26

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>点5测试 - border-radius</title>
<style type="text/css">
body{padding: 50px;-webkit-touch-callout:none;}
[class*="btn"]{margin: 0 auto;}
.btn-1 {
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
    border: 1px solid red;
}
.btn {
    position: relative;
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
}
.btn:before {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-style: solid;
    border-width: 1px;
    border-color: red;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
</style>
</script>
</head>

<body>

<div class="btn-1">1px border</div>
<br/><br/>
<div class="btn">.5px border</div>

</body>

</html>

http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html

图片 27

若是你在chrome打开,会发现缩放线条会造成边框颜色变浅,但我们能够放心使用,因为在多数运动装备(相对高端)的颜料仍旧健康的。

 

 赶在除夕前的一篇文章,愿天下有情人终成眷属 ❀

实现.5px的线条

网络上有很多艺术,如设置viewport,box-shawdow,border-image,background-image,transform:scale等,那里不做牵线(百度或者谷歌(谷歌)“retina 1px
边框”有答案),本文只介绍一种认为比较好用的点子,一来包容性好,二来不依靠图片。

transform:scale(x,y)

通过css辅助定义border或者height为.5px大的线条,在android设备中的不可能出示出来,那里有个小技巧,果设置线条为1px,然后经过transform:scale(x,y)来缩放线条为本来的一半,可显示0.5px的线条。

图片 28😉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>点5测试 - scale</title>
<style type="text/css">
.line {
    height: 50px;
    line-height: 50px;
    background-color: #CCC;
    border-bottom:1px solid red
} 

.scale {
    position: relative;
    height: 50px;
    line-height: 50px;
    background-color: #CCC
}
.scale:after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background-color: red;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
</style>
</head>

<body>
<div class="line">1px</div>
<br/><br/>    
<div class="scale">0.5px</div>
</body>

</html>

图片 29😉

http://1.peunzhang.sinaapp.com/demo/d5px/height-scale.html

图片 30

 

相关文章