首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS-圆角边框、阴影

当设置成YES时,图层里面所有东西都会被截取 边框 边框需要设置layer的两个属性,borderWidth和borderColor,并且边框是沿着图层bounds绘制,同时包含图层的角 borderWidth...上代码 因为圆角边框、阴影每个效果的设置都需要设置2~4个属性,再加上它们可以两两组合,如果用方法传不同参数来写的化,只方法名都要写半天,所以我机智的用了链式编程的思想来写了一个分类,下面来看一下...,conrnerBounds就不用传了 下面再来一个具体的用法: // 圆角+边框+阴影 UIView *view = [[UIView alloc] initWithFrame:CGRectMake...2,边框颜色蓝色,圆角曲率10 // 最后设置完属性后,调用.showVisual()来展示效果,如果想清除效果,可以调用.clerVisual()来清除之前设置的效果 // 如果连续设置两次,后面的值将会覆盖前面的值...、边框、阴影随意组合的效果,下面是效果图: ?

2.5K50
您找到你想要的搜索结果了吗?
是的
没有找到

【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )

文章目录 一、盒子模型圆角边框 二、代码示例 1、代码示例 - 正常矩形边框 2、代码示例 - 圆形边框 3、代码示例 - 圆角矩形边框 4、代码示例 - 综合对比示例 一、盒子模型圆角边框 ---...- 在 CSS3 , 新加入了 圆角边框 样式 , 设置 border-radius: length; 属性 , 即可设置 盒子模型 的 圆角边框 ; border-radius 属性值取值 :...像素数值 : 设置一个 像素值 , 如 : 50px ; 百分比数值 : 设置一个 百分比数值 , 如 : 50% ; 在网页设计 , 大量用到了圆角边框 , 如 : 购物车上的数字 : 购物车上的浮动数字..., 使用了圆角边框 ; 圆角的按钮 : 下图中 头像 以及 下面的两个 按钮 , 都是圆角边框 ; 二、代码示例 ---- 1、代码示例 - 正常矩形边框 默认情况下的边框 , 是 矩形的边框... 展示效果 : 3、代码示例 - 圆角矩形边框 如果 盒子模型 高度 !

2.2K20

css圆角边框怎么设置颜色_word图片怎么设置圆角大小

本文给大家简单介绍下css圆角边框怎么设置,大家可以参考,也可以直接拿过去使用,当然要修改下具体的参数。 border-radius 属性可以接受一到四个值。...规则如下: 圆角边框(border-radius)的基本用法:border-radius 属性是一个简写属性,用于设置四个圆角的属性。 圆角边框的最基本用法就是设置四个相同弧度的圆角。...现在大家应该知道css圆角边框怎么设置了吧!总结起来很简单,设置css圆角边框就是设置border-radius的值,设置的数字不同,圆角的大小也不同。...通过设计css圆角边框,我们就不需要再用带框的背景图片,这不仅让页面设计更加简单,同时也有利于提升页面加载的速度。...来源:http://www.12tebing.com/news/712.html 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

4.6K20

CSS3 圆角边框 阴影 浮动详解

CSS3 圆角边框、阴影、浮动详解 ---- 圆角边框: 在 CSS3 ,新增了圆角边框样式,这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。...border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50% 如果不是正方形,这种设置会生成一个圆角矩形...background-color: skyblue; box-shadow: 10px 10px 10px rgb(0, 0, 0, 0.3); } 结果如下: 可以通过在浏览器的...“检查”来查看更改选择器的box-shadow的参数来观察各参数的意义。...CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动 定位 注意:实际开发,一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式) 1.2 标准流(普通流

1.6K20

使用css3来实现边框圆角效果

经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?... Firefox 和 Safari 使用私有属性实现圆角效果; background-color: #ccc;这个表示边框内的底部图片颜色; border: 1px solid #000;...表示边框的宽度,实心的,颜色是黑色的; border-top-left-radius: 55px 25px;表示左上角的边框圆角效果,通过英文就可以识别:top,left,修饰圆角的长度通过控制像素值来实现...来实现边框圆角效果 其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius 是 webkit 内核浏览器(如 Safari...和 Chrome)实现圆角的私有属性,如果你只要指定某一个角是圆角的话,它们都分别定义了四个属性: -moz-border-radius-topleft / -webkit-border-top-left-radius

91310

CSS3圆角边框“完全解读”

HTML5学堂小编:圆形,一个很奇妙的形状,在各种地方都可以看得到,特别是现在各类网站,都会有各种的圆形。圆角的制作曾经困扰了开发者很久,以至于以前开发者只能使用图片来替代。...radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如图下图第2),而把这些角按照不同的顺序和大小来展现,也能够绘制成多种多样的图形。...代码解析:上述案例,我们主要是写了一个宽高都为0,但是边框大小是60px的圆,然后借助transparent属性让这个圆形的右边变成透明,以此来呈现一个“吃豆人”的形象。...本例,就使用圆角,借助伪元素:before和:after以及CSS3的旋转为大家制作了一个"爱心"。...代码解析:上述案例,阴阳图的上半部分是宽高度展示的,下半部分是元素的边框展示的,然后借助两个伪元素记忆伪元素的边框来实现黑色和白色的小圆,从而实现整个阴阳图的制作。

2K50

圆角的虚线边框?CSS 不在话下

那么,在 CSS ,我们还有其它方式能够实现带圆角,且虚线的单段长度与线段之间间隙可控的方式吗? 本文,我们就一起探讨探讨。...譬如如果希望边框中间不是背景色,而是镂空的,上述两种 CSS 方式都将不再使用。 因此,对于带圆角的虚线边框场景,最佳方式一定是 SVG。...的 SVG 代码图片格式。...图形的大小、边框的粗细、虚线的线宽与间距,圆角大小统统是可以可视化调整的。...通过一个动图,简单感受一下: 总结一下 本文介绍了 2 种在 CSS ,不借助切图和 SVG 实现带圆角的虚线边框的方式: 重复角向渐变叠加遮罩层 重复线性渐变叠加遮罩层 当然,两种 CSS 方式都存在一定瑕疵

28110

WordPress美化-缩略图&整站添加圆角边框、阴影

参考日主题,发现圆角用的美轮美奂,整个站点UI都有很大的提升,而我也特别喜欢加圆角和阴影。...直接给整站的图片加圆角-具体样式可以自己修改效果图片/** 网站圆角样式集合 **/#slider img,.single-tag li a,#slider img,.cat-box, .cat-title...*,.type-cat a, .child-cat a,.link-all a{border-radius: 8px}----缩略图修改,每个主题的样式不同,以grace主题为例效果图片缩略图背景加圆角在主题的...style.css文件内第196行样式内添加border-radius:10px;/*块圆角值*/图片缩略图前景(图片)加圆角在主题的style.css文件内第354行样式内添加border-radius...:10px;/*块圆角值*/图片更新【WordPress文章添加彩色美化框及彩色按钮】一文样式效果-样式加了圆角显示和阴影效果。

2.6K10

Xib、Nib、Storyboard下修改控件边框颜色、大小、圆角

问题: 今天有一个页面有很多uibutton,所以就用xib搭了界面,然后问题来了,如何在xib下修改控件的边框颜色和大小、圆角?...我之前知道利用IB面板下的“UserDefined Runtime Attributes”(如下图),然后问题来了,设置圆角可以成功设置,但是设置uibutton的边框颜色不行。...setter和getter方法的内容不要错了,然后可以完美运行 扩展:在swift 2.0可以用一下方法(我没有试) import Foundation extension CALayer{ //解决IBruntime...attributelayer.borderColor不能转换UIColor为CGColor var borderColorFromUIColor:UIColor{ set(color){ self.borderColor...User-Defined Runtime Attributes in Xcode with Objective-C 这里有比较有意思的扩展哦,有兴趣的可以看看  Xcode6快捷键、小技巧与xib圆角设置

2.1K20

从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角边框阴影

注意: 1、RGBA和HSLA的透明度不会影响子元素的透明度,不具继承性; 2、opacity 会影响子元素的透明度,子元素会继承父元素的透明度。...DOCTYPE html> Title <style...2、CSS3可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。...3、浏览器的兼容性 IE8 及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀 -moz-,对于低版本的 IOS 和 Android 浏览器也需要加上 -webkit- 四、边框圆角 使用.../*添加边框圆角*/ /*1.设置一个值:四个角的圆角值都一样*/ border-radius: 10px; border-radius: 50%; /*2.设置两个值:第一个值控制左上/右下,第二个值控制右上

1.4K30

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 list-style: none;                 ...这里就可以用margin -1px(取决你边框的宽度)来解决。...加入这行代码的样式,如下图  下面我们就来分析这就话,对于边框的top,和left向上和向左移动一个而对于right和bottom它们会把紧跟其后的元素拉过来。...其实每个li都向上和向左在原来的基础上移动了1px,对于bottom边框把下方紧随其后的top边框拉过来之后,top边框也要向上移动1px,刚好重合。...还有其他的解决方法,就是重合的边框你可以设置:border-top(bottom或left或right):none;这样的话也可以取消边框

3.1K00
领券