APICloud:让你的APP边框显示原生的1px

APICloud无疑已是相当火的APP开发工具了,面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉,比如这个border。怎样让1px更细,看起来像原生的?下面教大家一个方法:

.border {
    position: relative;
    width: 300px;
    height: 200px;
}
.border:after {
    border: 1px solid #ff3300;
    display: block;
    content: ‘‘;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1);
    pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .border:after {
        right: -100%;
        bottom: -100%;
        -webkit-transform: scale(0.5);
    }
}

如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。

PS:特别说明

千万别漏下了pointer-events: none;要不然就没法点击了

时间: 2024-08-10 21:21:52

APICloud:让你的APP边框显示原生的1px的相关文章

苹果app上架Appstore网页APP上架 彩票原生app上架全程协助

苹果app上架专业的苹果appstore市场上架服务提供商,大幅度提高过审机率!提供从开发者证书制作,APP打包,增加原生功能,上架市场一体化完整服务! APP上架|IOS app上线流程|如何发布苹果app|app上架费用(联系qq*220*5357*007)苹果app上架Appstore网页APP上架 彩票原生app上架全程协助 如何将WebApp项目打包生成手机APP 1.首先我们需要先新建一个WebApp项目,目录结构为: index.html  项目首页html入口文件 --html 

如何判断一个APP页面是原生的还是H5页面

来源:http://www.25xt.com/appdesign/11851.html Hybrid APP指的是半原生半Web的混合类App.需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web . 原生是Native APP,H5就是Web App 在Hybrid 当中,如何快速的判断一个APP页面是原生的还是H5页面呢? 1.看断网的情况 把手机的网络断掉.然后点开页面.然后可以正常显示的东西就是原生写的. 显示404或则错误页面的是htm

分辨一个app哪部分是原生的哪部分还是网页的

前提条件:安卓手机一部. ① 进入开发者中心,找到"显示布局边界"选项并开启 ② 这时我们就可以看到所有原生组件的边界和边距都被显示出来了,而网页的部分则没有 ③ 进入一个自己想看的app,就可以看到该app哪部分是原生的哪部分是网页的

Android - 安装应用(APP) 不显示图标

安装应用(APP) 不显示图标 本文地址:http://blog.csdn.net/caroline_wendy 在启动的activity的AndroidManifest注册中,添加隐式启动的data: <!-- 启动界面 --> <activity android:name="me.wcl.Activities.WelcomeActivity" android:configChanges="keyboardHidden" android:labe

(转)解决android开发人员,手机app图标显示不正确问题

android程序更换图标安装后不变解决办法 最近在搞android的时候发现,一开始程序使用系统默认图标,等到应用发布的时候要更换图标,结果在测试机上图标就是不变,其他手机和模拟器上都更新了图标. 测试机是小米,据说这个问题只在小米上会出现.网上查了原因说是miui会缓存图标,并且提供了两个解决方法 1.进入目录  /data/system/customized_icons 下,找到你原来的旧图标,删除即可.需要root权限 2.把当前的工程换一个包名,重新安装即可.换了包名等于是一个新的应用

ie 和谷歌浏览器在display的边框显示不一样的解决办法

eg1: <style> .class2{displau:block; background-color:#e4f39e;width:150px;height:150px; border:10px solid green;} </style> <div class="class2">测试</div> result:        左侧是google上运行的结果      右侧是在ie上运行的结果 在eg1上,用了display:block

Sublime插件库新成员基于APICloud快速开发跨平台App

互联网时代强调用户体验,那什么是HTML5跨平台App开发者的编程体验?"不剥夺.不替换开发者喜欢的开发工具,就是人性化的用户体验",APICloud给出了这样的答案! 重磅发布"多开发工具支持策略" "如果,你以为此次分享会APICloud只是讲解Eclipse开源插件代码经验,那就大错特错了!"APICloud CEO刘鑫以调侃的话进行了开场. 经过一年的上线摸索,APICloud团队充分的认识到"剥夺开发者已经习惯的开发工具,替换

封装一个UILabel圆形边框显示进度

封装了一个UILabel并让它显示圆形的边框,UILabel上面显示百份比,而边框则用Animation绘制到整个圆占指定百分比的点. 这只是我个人想的继承一个UILabel实现的,用到两个CAShapeLayer,第一个Layer的作用是画出灰色的背影圆圈,第二个Layer位置放置在第一个Layer的上面,并设置为红色描绘颜色并描绘到插定的位置,之后实现相应的动画效果即可. import UIKit class kCircleLabel: UILabel { var percent:Doubl

【Python学习笔记】-APP图标显示未读消息数目

以小米手机系统为例,当安装的某个APP有未读消息时,就会在该APP图标的右上角显示未读消息的数目.本文主要解说怎样用Python语言实现图标显示未读消息的数目.首先,还是要用到Python中PIL库,关于Linux下怎样安装PIL库,请大家參考这篇博客:http://blog.csdn.net/kevin_zhai/article/details/47720721,里面有具体的安装过程.实现的原理非常easy,直接用Image读取原始图标.然后将未读消息的数目插入到图标的右上角就可以. 脚本代码