文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS-核心动画详解之CALayer

对象,可以很方便地调整UIView的一些外观属性，例如可以给UIView设置阴影,圆角,边框等等... 2....2.2.设置边框 设置图层边框,在图层中使用CoreGraphics的CGColorRef //设置边框的颜色 _RedView.layer.borderColor = [UIColor whiteColor...].CGColor; //设置边框的宽度 _RedView.layer.borderWidth = 2; 2.3.设置圆角 图层的圆角半径,圆角半径为宽度的一半, 就是一个圆 _RedView.layer.cornerRadius...].CGColor;``` 3.2 设置图形边框 //设置边框宽度 _imageView.layer.borderWidth = 2; //设置边框颜色 _imageView.layer.borderColor...>这两个属性是配合使用的. position:它是用来设置当前的layer在父控件当中的位置的.所以它的坐标原点.以父控件的左上角为(0.0)点. anchorPoint:它是决点CALayer身上哪一个点会在

1.9K60

JS和JQuery获取当前元素的兄弟及父级等元素的方法

，不限于父元素 jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点 jQuery.contents()，返回下面的所有内容，包括节点和文本...这个方法和 children() 的区别就在于，包括空白文本，也会被作为一个 jQuery 对象返回， children() 则只会返回节点 jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点...var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSibling;   //获得...;   //获得s的最后一个子节点 JS获取节点父级，子级元素：JS的方法会比JQUERY麻烦很多，主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素：空的text元素，目前IE也是这样 　　 　　 原生的JS获取ID为test的元素下的子元素。

12.4K10
您找到你想要的搜索结果了吗？
是的
没有找到

iOS学习——核心动画之Layer基础

我们可以通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，可以给UIView设置阴影,圆角,边框等等... 2、如何操作layer改变UIView外观？ 　　...//设置图形边框 _imageView.layer.borderWidth = 2; _imageView.layer.borderColor = [UIColor whiteColor].CGColor...; //设置图片的圆角半径，必须要进行第二步的裁剪,超出裁剪区域的部分全部裁剪掉 _imageView.layer.cornerRadius = 50; _imageView.layer.masksToBounds...可以做一些简单的动画，例如：平移，拉伸，旋转 一些比较高端的动画，都是直接操作CALayer的，可以制作3D动画 使用CALayer，可以直接操作显示的东西，例如阴影，圆角，边框等 所以，对比CALayer...position:它是用来设置当前的layer在父控件当中的位置的，默认它的坐标原点，以父控件的左上角为(0.0)点。 　　anchorPoint：锚点，就是把锚点定到position所指的位置。

1.5K61

这才是真正的万能圆角ImageView

不知道有没有人记得我去年写过一个圆角的imageview。不知道的可以先去看看：万能圆角imagview，本文是基于上一篇的内容进行添加以及修改的。不然直接看这篇可能会有点懵。...最近公司有个需求是这样的。 ? 同事说，不知道怎么搞，于是乎，我把之前写的imageview给过去了。他来了句，你这圆角和fitxy同时设置会有问题啊，我反手就是一个大嘴巴子。...然后设置它的比例。 加上边框 为了更好的封装，我选择加上边框和边框颜色的自定义属性。那么接下来就是直接上代码了。 我们需要再定义一个画笔： ? 接下来我们就是直接画上去了。...我们发现我们修改的fitxy属性已经生效了。但是，为什么加了边框是这样呢？ 仔细想想。我们画圆角和圆的时候是不是忘记去掉了边框的宽度呢？那么我们既然找到了原因就可以找到解决方法了。...那我们就直接去掉边框的高度，注意！！圆角和圆的都要处理。

1.4K90

【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★

+ 边框宽度 10px * 2 = 270px ; 4、内边距 对 盒子模型尺寸 的影响 如果 标签元素 没指定 具体的尺寸 , 为该元素设置 Padding 内边距 , 则不会撑开盒子 ; 如果 标签元素... 标签中 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 ; 标签 默认设置了 8 像素的外边距 , 对应的调试模式中 橙色的 部分 ; body...不会合并 ; 8、嵌套模型盒子 外边距塌陷 嵌套 的 模型盒子 中 , 如果出现下面的情况 : 父元素 没有 内边距 和 边框 父元素 和 子元素 都设置了 上外边距 , 则会出现 父元素 上外边距 与...子元素 上外边距 合并的情况 , 合并后的 上外边距为 二者之间 较大的值 ; 推荐解决方案 : 为 父元素 设置 边框 或 内边距 , 不要让 两个外边距 互相接触 ; 为 父元素 添加 overflow...大量用到了圆角边框 , 如 : 购物车上的数字 : 购物车上的浮动数字 , 使用了圆角边框 ; 圆角的按钮 : 下图中 头像 以及 下面的两个 按钮 , 都是圆角边框 ; 2、圆角边框案例

25810

vue自定义指令和IntersectionObserver接口，监听元素进入父元素视窗内的实际应用

刚开始直接用的 vue-check-view，但是因为项目是用 electron 开发的桌面应用，布局上需要在列表父盒子上实现滚动。...然后想到h5里新出的监听元素是否进入视口的 IntersectionObserver，一看好像可以满足，在借助 vue 的自定义指令来封装成一个自定义指令使用。...除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。...来实现，binding.value 就是我们写在指令 = 后面的东西，可以传递函数、对象、数值、字符串、布尔任意类型（注意和 binding.expression 的区别）。...监听元素是否进入某个视口自定义指令 监听元素是否进入某个视口自定义指令，可以通过 root 参数传入父视口的选择器，不传就默认是相对于浏览器window窗口。

31740

HTML详解连载（7）

内边距-padding（出现在内容和盒子边缘之间） 边框线-border 外边距-margin（出现在盒子外面） 盒子模型-边框线 属性名 boder(bd) 属性值 边框线粗细 线条样式 颜色...外边距问题-塌陷问题 场景 父子级的标签，子级的添加上外边距会产生塌陷问题 现象 导致父级一起向下移动 解决方法 取消子集margin，父级设置padding 父级设置overflow：hidden...父级设置border-top 行内元素-内外边距问题 场景 行内元素添加margin和padding，无法改变元素垂直位置 解决方法 给行内元素添加line-height可以改变垂直位置 盒子模型-圆角...作用 设置元素的外边框为圆角 属性名 border-radius 属性值 数字+px/百分比（取值最大为50%） 注意 属性值是圆角半径 多值 从坐上叫顺时针赋值，没有对应的角与对角值相同 常见应用-...正圆形状 给正方形盒子设置圆角属性值为宽高的一半/50% 常见应用-胶囊形状 给长方形盒子圆角属性值为盒子高度的一半 盒子模型-阴影 作用 给元素设置阴影效果 属性名 box-shadow 属性值 X轴偏移量

12630

CSS布局(二) 盒子模型属性

margin 　　初始值: 未定义 　　应用于: 所有元素 　　百分数: 相对于包含块的width [注意]对于普通元素来说，包含块就是块级父级元素，对于定位元素来说，包含块是定位父级。...所以，普通元素的margin百分比相对于块级父级元素的width，定位元素的margin百分比相对于定位父级的width margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性...因为图片的宽度width默认是自身宽度，与父元素的宽度没有直接关系。...边框border 　　元素外边距内就是元素的边框border，边框由粗细、样式和颜色三部分组成，且先后顺序无关 基础样式 border: border-width border-color border-style...设置为圆角，则box-shadow的最终呈现也将是圆角 ?

1.9K70

CSS盒子模型

盒子本身没有写 width或者height属性时，不会撑开盒子 外边距：用于控制盒子与盒子之间的距离 margin-left / right / top / bottom 分别定义四边的外边距 和padding...;即可 外边距合并：在使用margin定义块元素的垂直外边距时，可能会出现外边距合并 嵌套块元素塌陷解决方法： 可以为父元素定义上边框 为父元素定义上内边距 为父元素添加overflow：hidden;...加上这行代码可以去掉小圆点 圆角边框:把盒子变成圆角的 border-radius: 10px; 通过设定radius（半径）的值来确定圆弧的大小，用该半径的圆去与盒子的两条相邻边切 所以数值越大弧度越明显...要想要做出圆形的盒子，先设置一个正方形盒子，在让半径等于边长的一半 width: 200px; height: 200px; border-radius: 50%; 圆角矩形：把半径设为盒子高度的一半...：用text-shadow来添加阴影 值 描述 h-shadow 必写，水平阴影的距离 v-shadow 必写，垂直阴影的距离 blur 模糊距离（虚实） color 阴影颜色，一般用半透明的 和盒子阴影写法一样

72330

巧妙实现带圆角的渐变边框

使用 border-image 最大的问题在于，设置的 border-radius 会失效。 我们无法得到一个带圆角的渐变边框。...为此，我们得另辟蹊径或者稍加改进，得到带圆角的渐变边框。...CodePen Demo -- bg + overflow 实现渐变边框 缺点 这个方案有两个问题，第一个是多使用了两个元素(当然在这里是 ::before 和 ::after)，其次最致命的是，如果要求边框內的背景是透明的...background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。它的部分取值和 box-sizing 类似。...你可以在我 CSS-Inspiration 看到这个例子： CSS-Inspiration -- 使用 clip-path 和 border-image 实现圆角渐变边框 最后 好了，本文到此结束，希望对你有帮助

6.7K30

CSS3 圆角边框 阴影 浮动详解

CSS3 圆角边框、阴影、浮动详解 ---- 圆角边框： 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。...如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列 注意： 浮动的元素是互相贴靠在一起的（不会有缝隙)，如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。...也就是说如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度。...如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 浮动的盒子中间是没有缝隙的，是紧挨着一起的 1.6 浮动元素经常和标准流父级搭配使用 为了约束浮动元素位置，我们页面布局一般采取的策略是...： 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置.

1.6K20

Android设置图片圆角的方法

Android中经常会遇到对图片进行二次处理，例如加圆角，或者显示圆形图片 实现的效果图： 方法一： 通过第三方框架Glide实现图片显示有圆角，有三种写法如下： 1.1、第一种实现： RequestOptions.../** * 通过BitmapShader实现圆形边框 * @param bitmap * @param outWidth 输出的图片宽度 * @param outHeight 输出的图片高度 * @...param radius 圆角大小 * @param boarder 边框宽度 */ public static Bitmap getRoundBitmapByShader(Bitmap bitmap,...boarderPaint.setStrokeWidth(boarder); canvas.drawRoundRect(rect, radius, radius, boarderPaint); } return desBitmap; } 实现圆形和边框...： /** * 通过BitmapShader实现圆形边框 * @param bitmap * @param outWidth 输出的图片宽度 * @param outHeight 输出的图片高度 *

3.4K30

CSS 笔记 盒模型和布局方式

调整某个方向边框可见色 圆角边框 属性：border-radius 指定圆角半径 取值：像素值或百分比 取值规律： 一个值 表示统一设置上右下左 四个值 表示分别设置上右下左 两个值 表示分别设置上下...特殊： 1）margin:0; 取消默认外边距 2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中 3）margin:-10px;元素位置的微调 单方向外边距：只取一个值...元素设置浮动,就具有块元素的特征,可以手动调整宽高 “文字环绕”:浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示 常见问题 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示...,影响页面布局 解决 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏) 在父元素的末尾添加空的块元素。...固定定位 参照窗口进行定位,不跟随网页滚动而滚动 脱离文档流 使用绝对定位：“父相子绝” : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.

1.1K10

从头学前端-CSS基础03

:collapse可以合并表格的相邻边框> 边框会影响盒子的实际大小；增加盒子大小，盒子的总大小为宽度或高度加上两个边框的大小；- 内边距> padding用于设置内边距，即盒子边框和内容的距离.默认是...，给父元素添加属性text-align: center --- > 嵌套关系的块级元素垂直外边距的塌陷问题；在父元素和子元素同时具有margin-top属性时，以最大值为准； 解决方式有：给父元素 >...，此时考虑清除内外边距； * { margin:0 padding:0 } > 行内元素尽量只设置左右边距，考虑兼容性问题； CSS3盒子属性圆角边框:> 用于设置元素的外边框圆角> border-radius...;这个时候就需要清除服务，就是清除浮动元素的影响；清除浮动后，父元素就会根据浮动的子元素自动计算高度；语法：图片清除浮动的方法：- 清除浮动的策略是闭合浮动，只让浮动在父元素内影响，不影响父盒子外面的盒子...,hidden 或scroll- 父元素添加：after伪类； 不需要添加额外标签，- 给父元素添加 双伪元素；before和after; 原理是在父盒子中的第一个元素和最后一个元素添加一个块级元素；图片

65520

前端基础-CSS模型

注意： 添加了padding属性的元素，会加大盒子的宽或高，需要减去padding的大小 如果这个块级盒子没有width属性（从父级继承宽度）的时候，添加padding和border不会撑大盒子（盒子内容部分会自动压缩...多学一招：margin:0 auto;可以让盒子在其父元素中居中 margin:0 auto;和text-align:center;的区别 margin:0 auto； text-align:center...; 针对的对象 盒子—块元素(标签本身) 标签内部的行元素 居中的范围 在父盒子中居中 自己内部 3.边框属性 边框有3要素：边框类型、边框颜色、边框厚度 a) 边框类型 语法：border-style...f) 边框圆角 语法：border-radius:值 取值：可以是像素，也可以是百分比 示意图 ?...多学一招：当盒子是正方形，圆角的值是边的一半或者百分比是50%的时候，是圆（ie8以下不支持），圆角和边框没关系 总结：元素加边框后，元素会变大 4.盒子模型的bug： a) 盒子上下摆放，上盒子有下外边距

54830

最全HTML与CSS基础总结，不进来看看吗？

CSS的三大特性 1.层叠性 2.继承性 3.优先级 五. CSS布局问题与边框阴影样式 1.外边距合并 2.圆角边框 3.盒子阴影和文字阴影 一....： 样式冲突, 遵循的原则就是就近原则, 哪个样式离结构进, 就执行哪个样式样式不冲突, 不会层叠 2.继承性 CSS中的继承：子标签会继承父标签的某些样式, 如文本颜色和字号。...1.2 嵌套块元素垂直外边距的合并（塌陷） 对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距 父元素和子元素的上外边距和发生合并 合并后的外边距为: 取两者外边距较大者...解决方案： ①、可以为父元素定义上边框 ②、可以为外父元素定义上内边距 ③、可以为父元素添加 overflow:hidden 2.圆角边框 在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了...border-radius属性用于设置元素的外边框圆角 border-radius:length; 参数可以为数值或百分比如果是正方形,想要按设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写

1K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券