Power BI 2023年6月推出的新卡片图功能十分强悍，上文《Power BI可视化的巅峰之作：新卡片图》介绍了五种主要场景。本文针对卡片图边框设置介绍一种个性化思路。...新卡片图支持边框的调整，如下可以调整为圆角矩形。除了圆角矩形，还内置了自定义样式，但也仅局限于简单线条的变化。...如果你有更个性化的需求，其实边框可以是这样子： 甚至这个样子： 在6月份之前，实现以上卡片图边框需要采取叠图的方式，也就是说，在基础卡片图下方叠加一个图片。...而现在，新卡片图可以直接填充背景图像。 所以，我们只需要寻找中空的，满足展示需求的图片，添加为背景即可实现异形边框。这里推荐SVG格式的图片，因为SVG是矢量图形，放大缩小不影响画质。...除了各种图片库，你也可以选择自己使用SVG编辑软件或者PPT画一个边框造型。
这是一个普通的带有边框的卡片图： 如果是美化目的，可以借助空心图片灵活设计边框，参考：Power BI卡片图异形边框 本文讨论的不是边框的美化，而是边框的数据化。...第一种数据化方式是，边框颜色使用fx随指标大小变化，比如业绩达成绿色边框，未达成红色边框。...在新卡片图视觉对象，如下施加颜色度量值： 颜色.达成 = IF ( [M.业绩达成率] >=1, "green","red" ) 第二种方式是强调栏颜色变化，相当于四个方向的边框只改变一个边： 强调栏施加...fx： 更多强调栏技巧：Power BI 卡片图强调栏应用情境 第三种是把边框当成拐弯的进度条图表。...以上所有效果，除了应用于新卡片图，也都可以用在表格矩阵，作为小多图使用。
作者：杨彬 部门：电商移动 概述 消息业务作为有赞移动的共享业务，在微商城、零售、美业等 B 端 App 中承担着多客服的角色，多客服是有赞为商家提供的连接商家和买家的即时消息客服工具；在精选、有赞客...目前我们消息卡片都是采用原生来开发，随着业务的日益增多，消息卡片的数量也在成倍的增长，业务方经常提出增加卡片的需求，去开发和维护这些卡片工作量比较大，并且依赖业务方的客户端发版，不够灵活。...消息聊天以及消息模版都是由消息卡片组成 原生消息卡片 先来说说原生消息卡片的实现方案，这里以 iOS 为例。...消息卡片cell，根据后端下发不同的卡片类型，从消息卡片配置类中获取不同的 contentView 加到 cell 中，进行消息卡片的展示 消息卡片 contentView，负责消息卡片 UI 布局、...首先该技术栈已经在有赞移动中扮演者重要的角色，我们团队之前已经做了 weex 无线开发平台，我们团队主导建设了 ZanWeex ，它是一整套解决方案，从开发、构建到发布、热修、数据、监控，全生命周期的平台和工具
我曾在之前的《[译文] 去形式化——移动设计新趋势化》( http://www.jianshu.com/p/a4451588ea72 )写过关于去形式化的话题。...曾经用来划分区域的边框和边线逐渐消失，然而在干净的界面上，通过距离分割，各区域的差别依旧清晰可辨。 ? 去形式样例 那么卡片化呢？...如果你的设计思维还停留在卡片话，那就落伍了，因为无框界面的趋势下，卡片的概念被淡化。卡片与否有何重要？...当然，即便有边框，还是能够通过对边框的特殊设计来控制用户的注意力不分散，但是边框越多，难度就越大。 减少设计束缚 设计是连贯、统一的。一旦一个区域有了边框，其它很多地方都要加上边框与之呼应。...我在《[译文] 去形式化——移动设计新趋势化》写过同样的问题，在去除多余“装饰”之后，界面只剩下内容，这回让不同产品之间越来越相似，走到极致，甚至可能大家看起来完全一模一样都有可能。
色彩鲜艳的调色板和无边框显示 大多数人早已经习惯了扁平化UI设计趋势的流行，以简约的方式呈现元素和柔和的色彩。...2.jpg 除了在设计中使用鲜艳的颜色之外，为了最大程度地吸引用户关注度，设计师将不得不把目光转向无边框显示，即连续性故事式展示。...为了创建良好的品牌体验，他们在无边框显示中使用高质量的图片，以重新定义移动设计严格的网格设计概念。这种的方法有效地消除了创意的界限，帮助设计者从局限的思维中跳出来。 2....Web和移动应用中的卡片式设计 在UI设计的趋势中，卡片式设计已经开始席卷大多数的应用场景。...甚至连Google这样的巨头也开始在卡片上显示个人搜索结果。据专业人士预测，在2018年的UI设计中，卡片的使用几率会越来越大，尤其是在智能手机软件和移动应用上。
今天介绍一个取巧的办法：折线本身是固定的，在折线的上方覆盖一个长方形，长方形和背景色保持一致（此处为白色），长方形刚开始完全覆盖折线，数据发生变化后（比如日期范围进行了重新选择），长方形开始从左向右移动...折线和长方形移动动画的代码如下： <polyline fill='none' stroke='LightGrey' stroke-width='" & Line_stroke & "' points='...Power BI迄今为止推出的最强大的视觉对象，以下是已经分享的用法，有兴趣可以翻阅： 《卡片图添加异形边框》 《卡片图主次指标组合》 《卡片图总分结构》 《卡片图添加地图》 《卡片图添加下划线...》 《卡片图添加折线趋势》 《卡片图叠加进度条》 《卡片图添加天气动画图标》 《卡片图模拟微信日周月对比》 《卡片图指标与排名组合》 《卡片图添加麦肯锡华夫饼图》 《卡片图添加环形图扇形图》 《卡片图展示访客漏斗...》 《卡片图异常指标闪烁提示》 《卡片图单位切换》 《卡片图显示动态水印》
我们常见的卷积是一个二维的操作，即一个卷积核在图像上进行滑动。如果再考虑上各个通道间的信息融合，那么就是一个三维的操作，包含了通道，宽度，高度三个维度。如果将各...
毛玻璃效果在 iOS 系统上比较常见，比如消息通知栏、手机助手卡片等地方，所以咱打开苹果官网看看！...，通过 fixed 方式固定背景图，这样当元素在任意方向滚动的时候，背景图不会移动，能保证背景效果是一致的 移动时候的效果 3.2 利用 margin 属性的负值扩大容器 模糊度的效果如下图，还是有差异...，因为 filter 是从容器外边框向内聚合的一个滤镜，导致滤镜外边框有一个白圈 此时只需要扩大 ::before 元素的容器大小，这里直接可使用 margin 属性负值扩大容器 .card-filter...因为 ::before 伪类作用于 .card-filter 元素内，是其子元素，又因为 ::before 的 background 属性设置了背景图，遮盖了父元素 .card-filter 的背景色。...如果“毛玻璃”和背景没有文中的相对移动，直接让 UI 小姐姐切个图，直接解决一切兼容性 & 性能问题！
本文是Power BI新卡片图系列第11篇分享，前10篇如下： 《Power BI巅峰之作：新卡片图》 《卡片图添加异形边框》 《卡片图主次指标组合》 《卡片图总分结构》 《卡片图添加地图》...《卡片图添加下划线》 《卡片图添加折线趋势》 《卡片图叠加进度条》 《卡片图添加天气动画图标》 《卡片图模拟微信日周月对比》 ---- Power BI表格矩阵可以借助条件格式图标实现指标和排名组合，...排名也可以放到上方，以下看上去是一种神奇的效果，排名在边框之上。 如果使用卡片图的默认边框，是无法产生这种效果的，此处实际做了一个假边框，下图外层是真实边框，内层为假边框。...假边框是我们填充了一个卡片背景图，填充方式参考此文《Power BI卡片图异形边框》。填充完成后关闭真边框，并把排名图像至于上方。...还有一种更神奇的效果，排名图标在边框角落，而不是上下左右，读者可以思考下如何实现。
带灰色圆角边框。...【卡片】卡片用于定义一块带圆角的区域。....card 定义卡片容器 .card-body 卡片主体内容部份 .card-header 卡片头 .card-footer 卡片尾 .card-title 卡片标题 .card-text 卡片文本区域...bg-{primary、secondary、success、warning、danger、info、dark、light} 定义卡片的背景色,定义在卡片容器上 【边框】 .border 含有边框 ....collapse" 折叠触发对象必需属性 data-target="#id" | href="#id" 折叠触发对象必需属性 .collapse 折叠目标对象样式 data-parent="#id" 属性来实现父元素下
在用translate3d移动一下吧。 效果如下图，屌屌屌。...根据后端数据动态设置父元素.cube-box的宽高，子元素全部自适应就行，这样才更好用。...不对啊，怎么底部还是有移动？...在box里插入n个div，每一个div样式相同设置为border-radius:50%和1px的border边框，唯一不同的是它们的translateZ位置相邻相差1，其实就是把1px的边框依次排列起来形成一个圆柱...实际也非常简单，还是利用上面demo1的原理旋转卡片，再通过定位把卡片排列，定义一个无限循环的摇摆动画，给每个卡片使用不同的时间，最后绑定点击事件，给元素使用css过渡动画transition。
涉及到的知识点 导航栏的高度计算 //获取浏览器窗口的工具栏、菜单栏和边框等元素的总高度 function barHeight() { return window.outerHeight...screenX = clientX + window.screenX; //注意：window.screenY 是浏览器窗口左上角相对于屏幕左上角的距离，不包括浏览器窗口的工具栏、菜单栏和边框等元素的总高度...card.offsetLeft; const y = e.pageY - card.offsetTop; window.onmousemove = function (e) { // 根据相对偏移量和鼠标移动事件的坐标计算卡片新的位置...css .container{ width:300px; height: 300px; position: absolute; } js //获取浏览器窗口的工具栏、菜单栏和边框等元素的总高度...card.offsetLeft; const y = e.pageY - card.offsetTop; window.onmousemove = function (e) { // 根据相对偏移量和鼠标移动事件的坐标计算卡片新的位置
父div设置黑色的边框！...当加上backface-visibility:hidden;，只剩下了黑色的父亲div边框。 翻转卡片 有了上面的backface-visibility，实现翻转卡片还不是手到擒来！！！...创建容器 复制代码 因为翻转卡片，我这里内部使用了两个div，所以我直接设置.card{width,height}，为了保证两个card可以重叠，设置...position: relative; 两个卡片 半夏
卡片循环滚动 实现思路： • 定义卡片的摆放规则； • 调整卡片的层级关系； • 调整卡片的尺寸大小； • 卡片向指定方向移动，动态调整位置、大小、层级关系。...] private GameObject itemPrefab; //列表项预制体 [SerializeField] private Transform itemParent; //列表项的父级...SiblingIndex=父节点的子物体数量-2。...动态调整位置、层级和大小 移动动画 首先为每张卡片添加脚本，用于实现卡片的移动逻辑，使用插值的形式来实现动画过程，假设动画所需时长为0.5秒，使用变量float类型变量timer来计时，自增Time.deltaTime...，如果是，使其立即变为最左侧的卡片，不表现动画过程，目的是为了防止如下图所示，卡片从最右侧移动到最左侧的穿帮现象： 穿帮现象 在生成卡片时，为卡片物体添加该脚本，并添加到列表中进行缓存，同时，定义一个用于存储各编号对应的层级和坐标的数据结构
新卡片图视觉对象（不了解新卡片图参考此文：Power BI可视化的巅峰之作：新卡片图）能否实现同样的功能？ 答案是肯定的。...新卡片图任意放入两个指标，生成两个卡片，可以看到卡片中间有明显的缝隙。 在布局-卡片间距将像素设置为0，可以看到缝隙消失，两个边框合并为一。...目前为止，两个卡片的内容仍然独立显示，没有穿透的感觉。我们在卡片放入一条直线，以便观察连接效果： 把上方SVG横线放入卡片图图像URL，两个线条断开明显。...边框是否阻止了横线的连接？并没有。把边框加粗可以看到横线直接穿过边框，如果视觉上有少许缝隙，可以借助stroke-dasharray将线条虚线化进行掩盖。 横向可以穿透，纵向是否可行？...尽管有局限，但是对使用新卡片图自定义可视化效果还是有重要的意义。要知道穿透的卡片可以不限于两个，而且A卡片和B卡片的图案可以不一样且完成拼接。
本文是Power BI新卡片图系列第五篇文章，前四篇如下，视频教程也在连载中。...《新卡片图五大应用场景》 《新卡片图异形边框》 《新卡片图主次指标组合》 《新卡片图总分结构》 ---- Power BI 2023年6月推出的卡片图视觉对象是一个良好的地图载体。...在卡片图添加地图，本质上就是添加图标，以下卡片图中，地图的添加方式和销售业绩、业绩达成率的图标没什么不同。...分析地图的源代码，有stroke字样表示边框颜色，fill字样表示填充色，借助DAX，可以将这两者动态化。...比如，原始边框色是黑色，新建如下地图度量值，进行颜色替换，即可实现红绿色边框展示，填充色同理。
且 Menu 按钮展示时，需要浮动在内容卡片上方，不能被遮挡，移动端和 PC 端顶部导航栏高度一致，均为 54px。 移动端导航栏的菜单项每一项独占一行。...显示移动端布局时，卡片描述和对应图片各占一行，且都撑满 #tutorials 容器。...*/ } border-top: 1px #959595 solid;：为菜单容器的顶部添加一条 1 像素宽、颜色为 #959595 的实线边框。...页面内容卡片样式（#tutorials 部分） /* 移动端卡片样式 */ #tutorials .row { display: block; /* 卡片描述和图片各占一行 */ } #tutorials...将菜单改为可折叠的垂直菜单，菜单项独占一行，课程内容的描述和图片也改为垂直排列，确保在移动端有良好的显示效果。 4.
类用于创建卡片的底部样式。...加上 .accordion-flush 来移除预设 background-color、 外框和圆角使该手风琴能和父容器紧邻。...导航(Navbar) 在父元素上添加nav类，在子元素上添加nav-item类，在链接上添加nav-link类来创建导航。...>鼠标移动到我这 提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。 通过向元素添加 data-toggle=”tooltip” 来来创建提示框。...如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover"。 Scroll滚动监听 例： <!
卡片上方的空白，是我们设置的 padding 但是，定位的是元素左边缘和上边缘，现在我们希望元素本身往左边移动自身宽度的一半。...通过另一个属性，可以控制元素的移动： transform:translateX(-50%) ，x轴，就是水平位置。这里的百分比的参照物是元素本身的宽度。...同理也有 translateY 总结一下： 设置父容器 为相对位置。 position: relative 设置目标元素绝对位置。 position: absolute 设置目标元素位置距离值。...top , right , bottom , left ，可以用百分比，参照物是父容器的宽高 设置目标元素的偏移。...但是现在需求还没有完成，圆形图标怎么可以往上移动，而又刚好放到卡片上边缘一半的地方？ 从卡片里面往上移动，确实不好做。因为卡片有内边距。其实有许多实现方式，这里只说一种，另一种我放到源码里面。
如果您错过了大会直播，可通过本文了解其中最重要的内容，也可以查看 无缝构建跨设备体验 | Google I/O 大会精彩回顾 视频了解 平板设备、可折叠设备和大屏设备 在设计应用时，使其能够在 大屏幕设备...(包括平板设备、可折叠设备和 Chrome OS 笔记本电脑) 上流畅运行变得越来越重要。...与此同时，全新可折叠设备也让用户能够更轻松地处理多项任务，并开创了无需持握的桌面模式新体验。请参阅在 Samsung Galaxy Z Fold2 上使用桌面模式的 Disney+ 示例。...Jetpack 卡片库 让 用户可以快速访问他们最需要的信息，以及提供符合预期的操作互动。...您可以查看下方的本次 Google I/O 演讲视频详细了解相关公告: Wear 更新一览 在 Wear 中创建您的第一张卡片 即刻下载 Android Studio Arctic Fox Beta
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
