在使用uni-app实现小程序的时候,设置左图的右圆角不生效,样式也都没有问题,在模拟器上也可以正常现实,手机上样式出现差别,现有以下解决方法: 设置整个圆角,然后左边使用margin-left:-30upx,隐藏左边多余的圆角 代码如下: <cover-view class="video-mask-btn"> <cover-view class="video-mask-btn-left"> 视频步骤 </cover-view>

1.圆角正方形 .rounded-square{ width: 200px; height: 200px; background-color: pink; border-radius: 50px; } 当border-radius的值为一个时,它的最大有效值为“盒子最短边的二分之一”. 2.正圆 .circle{ width: 200px; height: 200px; background-color: pink; border-radius: 100px; } 3.圆角矩形 .rounded

无法实现,建议写个image在中间位置加个播放按钮,点击播放跳转新页面只需要在跳转参数里面把视频链接加上,在onLoad里面获取视频链接,自动播放视频,很多app目前都是这样做的,关闭页面后视频会自动关闭,而且播放页面可以共用,图片圆角设置起来也比较方便

一.问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:       二.怎么搞? 机智的我,第一想法就是,切一张中间圆形透明.四周与底色相同.尺寸与头像相同的蒙板图片,盖在头像上不就完事了嘛,哈哈哈! 在背景纯色的前提下,这的确能简单解决问题,但是如果背景没有这么简单呢? 在这种不规则背景下,有两个问题: 1) 背景图常常是适应手机宽度缩放,而头像的尺寸又是固定宽高DP的,所以固定的蒙板图片是没法保证在不同机型上都和背景图案吻合的. 2) 在这种非纯色背景下,哪天想调

说点题外话. Coding中我们总是经历着这么几个过程. 学会使用: 不管是API也好, 开源库也好. 总是在最开始的学会去用. 了解实现原理: 可能会因为一些不兼容, 代码的异常状态的处理不够完美等需要查看实现并修改, 或者因为你有一个好奇心向窥探一下内部实现.. 这时我们开始试着去阅读, 试着去理解. 是否可以自己写一个更好的?: 这个时候你可能已经熟悉了一个模块需要如何去写. 如何构造出一个别人没有或者扩展了新功能的一个小Demo. 终极目标: 写出了一个功能效果更酷的Demo, 但是这个

border-radius:该属性允许您为元素添加圆角边框! div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ } 语法 border-radius: 1-4 length|% / 1-4 length|%; 注释:按此顺序设置每个 radii 的四个值.如果省略 bottom-left,则与 top-right 相同.如果省略 bottom-right,则与 top-lef

首先先得瑟一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的解决方案不能满足所有的情况,是有特定条件的,比如  WPF中不规则窗体与WebBrowser控件的兼容问题解决办法.该网友的解决办法也是别出心裁的,为什么这样说呢,你下载了他的程序认真读一下就便知道,他的webBrowser控件的是单独放在一个Form中,让这个Form与WPF中的一个Bord控件进行关联,进行同步移动,但是在移动的时候会出现闪烁,并且还会出现运动的白点,用户体验肯定不好. OK,

早上在w3ctech上看到 中国第二届CSS Conf总结  的时候,真是开心极了: 自从去年在慕课网上看了第一届CSS conf 视频之后,整个人都震惊了,原来还有大会是专门用来讨论CSS的,而且分享的CSS知识真是让人眼界大开: 我在博客园写的第一篇博文<布局神器:Flexbox>便是受到第一届CSS Conf的启发; 所以,算是结下了不解之缘:如今看到第二届分享的视频和PPT时,虽然才看到 <重拾 css 的乐趣(上)> 这一部分内容,但却很受启发 今天文章的主题是用css3

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. border的组合写法 border:border-width border-style border-color; border-width:边框宽度,不能为百分比,因为不会根据设备宽度改变:同理,outline | text-shadow | box-shadow 也不可以: border-style:边框样式,一般用solid多一点,dashed(虚线).dotted(点状线)也有: bor

一.什么是“蝉原则”? “蝉原则”,英文称作“cicada principle”,是一种让事物的重复出现符合“自然随机性”的规则,为什么这么说呢? “蝉原则”源自于北美,中国似乎并未有这样的说法,这背后是有有故事的: 北美和东亚蝉的种群是不一样的,在东亚蝉的幼虫生活在土中3年5年或7年:但是北美有一种周期蝉(Magicicada),其生命周期为十三年或十七年,也被称为十七年蝉或十三年蝉.东亚的蝉生命周期短,因此,给人感觉好像每年都有很多蝉,而北美的周期蝉的生命周期很长,因此能够让人明显感觉到每隔

基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border-width: 50px; border-style: solid; border-top-color: cyan; border-bottom-color: blue; border-left-color: orange; border-right-color: green; } 有没有发现什么?

winform圆角窗体实现 1.窗体的FormBorderStyle设置成None,不要控制边框 2.TransparencyKey和BackColor颜色设置成相同的,这样,窗体就透明了 3.以此为基础,制作透明不规则窗体,可以在窗体上设圆角背景图片 只需要解决的是无边框窗体的拖动\关闭等事件处理,就可以不通过重绘窗体来实现.

其中有一个不太规则的label:   image.png 这个label顶部的两个角是圆角,底部的两个角是直角,底部还有一个小三角. 思路 CAShapeLayer联合UIBezierPath画一个不规则的layer作为label.layer的mask. 具体实现 1.自定义一个继承自UILabel的IrregularLabel import "IrregularLabel.h" @interface IrregularLabel () /** 遮罩 */ @property (non

    前一篇文章讲述了Android触屏setOnTouchListener实现突破缩放.移动.绘制和加入水印,继续我的"随手拍"项目完毕给图片加入相框.圆形圆角显示图片和图像合成的功能介绍.希望文章对大家有所帮助. 一. 打开图片和显示assets文件里图片 首先,对XML中activity_main.xml进行布局,通过使用RelativeLayout相对布局完毕(XML代码后面附).然后,在Mainctivity.java中public class MainActivity e

作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,main.js.日志打印,定时器,生命周期,页面,页面通讯. pages.json文件时用来对uni-app进行全局配置的,它是用来写页面文件的路径,窗口样式,底部的tabbar等,类似于小程序中的app.json的页面管理.这里注意的是定位,在小程序中是在app.json的,而在uni-app中式在m

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border-color; border-width:边框宽度,不能为百分比,因为不会根据设备宽度改变:同理,outline | text-shadow | box-shadow 也不可以: border-style:边框样式,一般用 solid 多一点,dashed(虚线).dotted(点状线)也有: bor

最近公司项目在用uni-app做小程序商城,其中商品和个人需要生成图片海报,经过摸索记录后将一些重点记录下来.这里有两种方式来生成 1.后台控制生成 2.前端用canvas合成图片 这里我们只讲使用canvas合成图片的方法,canvas包括绘制文字.图片.图形以及图片显示处理. 一.初始化canvas画布 通过createCanvasContext方法来创建画布 var _this = this; _this.ctx = uni.createCanvasContext('canvasid',

css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时,则为正圆 单独设置每个圆角: 四个值: border-radius:左上角 右上角 右下角 左下角 三个值: border-radius:左上角 右上角+左下角  右下角  两个值: border-radius:左上角+右下角  右上角+左下角 兼容浏览器前缀 谷歌 -webkit- 火狐 -moz

实现一个不规则窗体 这里我们实现一个圆形窗体,实现其他形状的窗体与这个方法类似. 首先,把窗口的高度(height)和宽度(width)值修改为相同的值,使窗口成为一个正方形. 其次,把窗口的透明属性(transparent)设置为true,这样设置之后窗口还是正方形的,但只要我们控制好内容区域的Dom元素的形状,就可以让窗口看起来像一个不规则形状一样. 不规则窗口往往需要自定义边框和标题栏,所以frame也设置为false. 另外,透明的窗口不可调整大小.所以将resizable属性设置为fa

一.分类 1.1 页面布局 首先创建cate的分支 定义基本结构,因为是两个需要滚动的区域,所以这里要用到组件 scroll 这个组件如果是y scroll那就要固定高度,x scroll那就要固定宽度 这里有个问题就是,我们应该把高度限定在整个屏幕高度 这里用到uniapp一个api uni.getSystemInfoSync()他可以获得很多信息,比如该手机型号.以及平台.还有整个屏幕宽高以及内容区域宽高等 1.2 一级分类 先获取数据 然后开始渲染 注意block类似于template不占