- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正尝试在我的移动应用程序中使用 HTML/CSS 制作此形状: https://embed.plnkr.co/9k8jbJyzUiSMSoSHlOti/
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
}
.inner {
height: 100%;
width: 100%;
background-color: green;
}
<div class="boundary"></div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
在我的浏览器中,当我检查元素并更改缩放比例(至 75%)时,2 <div>
之间存在间隙.当我在我的设备中部署我的应用程序时,我可以看到同样的差距。
这是怎么回事?
这是我制作形状的方式:
我创建了第一个 div 来做斜线。我做了一个响应式三 Angular 形(我从这个 Question 中挑选了一些信息)
1) 在我的 div 中,我插入了第一个伪元素并给它父级的 100% 宽度和高度。我应用旋转:我在左上角定义了一个变换原点,并使用 transform: rotate(3deg)
将伪元素顺时针旋转 3 度。
2) 我必须调整宽度和高度:我使用百分比和 padding-bottom
保持纵横比(more information here)所以:
[rectangle height] : padding-bottom = tan(3deg) * 100% = 100.13723% (100% is the screen width)<br/>[hypotenuse of triangle = new rectangle width] : width = tan(3deg) * 100% / sin(3deg) = 5.24078%.
3) 为了隐藏伪元素不需要的部分(所有溢出 <div>
的红色边框)我设置了 overflow: hidden
在容器上。
<div>
先斜后<div>
.这<div>
很简单,无需特殊变换,包含Lorem ipsum。 最佳答案
这通常发生在转换元素时,因为浏览器开始对元素的边缘进行抗锯齿处理。
Antialiasing is something of an unsung hero in web graphics; it’s the reason we have clear text and smooth vector shapes on our screens.
虽然缩小/缩小浏览器不会正确地重新缩放元素,例如如果将 1px
高度的元素缩小到 0.75%
,浏览器应将元素重绘为 0.75px
但浏览器无法绘制 0.75px
,它要么创建 1
,要么尝试通过像素模糊或 50% 不透明度使边缘平滑。
在上图中,您可以看到正在绘制相同的三 Angular 形,但在左侧它启用了抗锯齿,而在右侧它被禁用。如您所见,启用抗锯齿后,当三 Angular 形仅穿过部分像素时,像素为灰色阴影。然而,当禁用时,像素将填充为纯黑色或纯白色,并且形状看起来呈锯齿状。
使用 backface-visibility: hidden;
或在缩放/转换时具有负边距的重叠元素是避免此问题的更好选择。
不使用 backface-visibility: hidden;
html,
body {
transform: scale(.8);
}
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
}
.inner {
height: 100%;
width: 100%;
background-color: green;
}
<div class="boundary"></div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
演示使用 backface-visibility: hidden;
html,
body {
transform: scale(.8);
}
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
}
.inner {
height: 100%;
width: 100%;
background-color: green;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
<div class="boundary"></div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
演示由 OP in comment 提供通过使用 backface-visibility: hidden;
和带有 negative margin
html,
body {
transform: scale(.75);
}
.inner {
height: 100%;
width: 100%;
background-color: green;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.inner-2 {
background-color: red;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.inner-3 {
background-color: blue;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
margin-top: -2px;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
backface-visibility: hidden;
}
.boundary-2 {
background-color: green;
}
.boundary-2:before {
transform-origin: top right;
transform: rotate(-3deg);
background-color: red;
}
.boundary-3 {
background-color: red;
}
.boundary-3:before {
transform-origin: top left;
transform: rotate(3deg);
background-color: blue;
}
<div class="boundary"></div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="boundary boundary-2"></div>
<div class="inner inner-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="boundary boundary-3"></div>
<div class="inner inner-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
PS:不要忘记使用 viewport meta
标签来提高响应能力。
关于html - 为什么div和旋转的div(三 Angular 形)之间有间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45054056/
我正在尝试在项目中学习和添加 Angular 国际化。我只能理解 Angular 文档 (https://angular.io/guide/i18n-overview) 的编译时翻译。 我需要这样的东
在我的 Angular 应用程序中,基于登录用户,我想通过显示/隐藏不同的菜单项或允许/禁止某些路由来授予或限制功能。 目前成功登录后,我的 .NET Core API 会返回一个 JWT token
我是 Angular 的新手,目前我已经看过 angular.io 网站提供的一些示例。但是在component decorator在文档中的解释,它指出 Angular components are
这里是service employee-service.service.ts的代码 import { Injectable } from '@angular/core'; import { HttpC
我目前正在使用@angular/http URLSearchParams 类来检索 URL 参数。在 Angular 5 中,注意到这已被弃用,但我没有看到以我当前使用的方式替换 URLSearchP
我目前正在使用@angular/http URLSearchParams 类来检索 URL 参数。在 Angular 5 中,注意到这已被弃用,但我没有看到以我当前使用的方式替换 URLSearchP
如何正确安装 PUG/JADE 到 Angular 2 或更高版本 这样在工作和 AOT 和 JiT 的同时 工作单元和集成测试 并且在创建每个新组件时不会受到太多影响 最佳答案 我看到了很多解决方案
我的 Angular 12 应用程序中有一些通用组件,我计划将其创建为一个 Angular 库,以便其他应用程序也可以使用它。我们有一些应用程序在较低版本的 angular(例如 angular 8/
tl;dr; ng build 删除了包含我编译的自定义库的/dist 文件夹。这会使我项目代码中对该库的所有引用无效,从而导致 ng build 最终失败。我做错了什么? 我关注了documenta
我正在将一些“遗留”(非 typescript )js 库导入到我的 Angular SPA 中。 通常我只是从 cdn 添加一个负载到 index.html 就像: 在 Angular 分量中我只
我有这个 angular 应用程序,它基本上使用了库的概念。 我有 2 个名为 的库Lib1 和 lib2 根据他们所服务的微服务分组。 现在我将这些库导入主应用程序,即 应用1 事情一直到现在。 现
我在我的项目中启用了 angular Universal。我现在想完全删除它。我试图删除以下文件 /server.ts /webpack.server.config.js /src/tsconfig.
我已经有一个 AuthService 在登录时对用户进行身份验证,并且 AuthGuard 在未登录的情况下阻止访问。 某些页面我通过 UserProfile/Role 限制访问,但现在我需要阻止页面
我正在尝试使用 angular、TypeORM、SQLite 和其他组件作为 webpack 构建 Electron 应用程序。 我从在 GitHub 上找到的示例开始我的开发:https://git
我在从 Angular 8 更新到 9 并运行时遇到以下错误 ng 更新@angular/material: Package "@angular/flex-layout" has an incompa
我正在尝试使用 Angular 9,我想创建一个项目,然后创建一个库项目并开始向其中添加我想稍后在 GitHub 上发布的通用模块,并在我的本地使用这些库项目。 相关依赖如下: Angular CLI
我正在尝试使用 Angular 9,我想创建一个项目,然后创建一个库项目并开始向其中添加我想稍后在 GitHub 上发布的通用模块,并在我的本地使用这些库项目。 相关依赖如下: Angular CLI
我正在我的 h1 元素“之前”创建一个小的程式化三 Angular 形图案,但我无法正确地圆 Angular 。右上角没问题,但其他两个有剪裁问题。 这是输出以及形状的放大图像: 使用的代码如下: h
我有一个 Angular 元素,带有自定义标记名 - fancy-button。如何将 fancy-button 嵌入 Angular 应用程序? 我已经尝试了以下方法,但都没有用 - 在 index
我已将我的项目从 angular 5.2.9 升级到 angular 6.0.0-rc.5。 除了包路径中的几个快速 RxJS 修复外,一切看起来都不错。(此链接非常有用:Want to upgrad
我是一名优秀的程序员,十分优秀!