边框 边框的属性很多,其中边框圆角和边框阴影这两个属性,应用十分广泛,兼容性也相对较好,且符合渐进增强的原则,需要重点熟悉。 边框圆角:border-radius 属性 边框的每个圆角,本质上是一个圆,圆有水平半径和垂直半径:如果二者相等,就是圆;如果二者不等, 就是椭圆。 单个属性的写法: border-top-left-radius: 60px 120px; //参数解释:水平半径 垂直半径 border-top-right-radius /垂直半径 border-radius: 20px 60px 100px 140px; //从左上开始,顺时针赋值。 如果当前角没有值,取对角的值 border-radius: 20px 60px; 最简洁的写法:(四个角的半径都相同时) border-radius: 60px; 举例: <!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>118-边框圆角</title> <style -- 1.什么是边框圆角? 将直角的边框变为圆角的边框 2.边框圆角的格式? border-radius: 左上 右上 右下 左下; 3.将正方形变为圆形的技巧 border-radius: 50%; 4.系统如何绘制圆角? 首先根据指定的值找到圆心 按照指定的值作为半径绘制圆弧 --> </body> </html
一键领取预热专享618元代金券,2核2G云服务器爆品秒杀低至18元!云产品首单低0.8折起,企业用户购买域名1元起…
padding-box; /* 背景图片显示的起始位置 */ padding-box 从padding区域开始显示背景图片(默认) content-box 从内容区域开始显示背景图片 border-box 从边框线开始显示背景图片 background-clip:padding-box; /* 背景剪裁 */ padding-box 把padding区域以外的背景图片裁剪掉 content-box 把内容以外的背景图片裁剪掉 border-box 把边框线以外的背景图片裁剪掉 */ 渐变方向: at(left right center top bottom) 关键词 渐变形状: ellipse 椭圆(默认) circle 正圆 渐变半径: px 半径值(椭圆两个半径值,正圆一个半径值 ) farthest-corner 半径为圆心到最远角度的距离(默认) closest-corner 半径为圆心到最近角度的距离 farthest-side 半径问圆心到最远边的距离 closest-side 半径问圆心到最近边的距离 } div{ width:100px; height:100px; background-image:repeating-radial-gradient(at left,red
/line.svg" frameborder="0"></iframe> src是 SVG 文件路径,width、height、frameborder 设置的大小和边框。 ="40" // 圆的半径 stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色 </svg> 上述(cx,xy)定义圆心的位置,是可选参数 r是必需参数,设置圆的半径。 3.4、椭圆 - ellipse 椭圆与圆相似,不同之处在于椭圆有不同的x和y半径,而圆两个半径是相同的。 // 使用语法 <svg width="300" height="300" > <ellipse rx="20" ry="100" //设置椭圆的x、y方向的半径 fill="purple" // 椭圆填充色 cx="150" cy="150" //设置椭圆的圆心 ,可选参数 ></ellipse> </svg> 上述椭圆的两个rx、ry两个方向半径是必须参数,如果rx=ry就表示是圆形
/line.svg" frameborder="0"></iframe> src是 SVG 文件路径,width、height、frameborder 设置的大小和边框。 "40" // 圆的半径 stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色 </svg> 上述(cx,xy)定义圆心的位置,是可选参数, r是必需参数,设置圆的半径。 3.4、椭圆 - ellipse 椭圆与圆相似,不同之处在于椭圆有不同的x和y半径,而圆两个半径是相同的。 // 使用语法 <svg width="300" height="300" > <ellipse rx="20" ry="100" //设置椭圆的x、y方向的半径 fill="purple" // 椭圆填充色 cx="150" cy="150" //设置椭圆的圆心 ,可选参数 ></ellipse> </svg> 上述椭圆的两个rx、ry两个方向半径是必须参数,如果rx=ry就表示是圆形
CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框! IE9+、FireFox4+、Chrome、Safari5+、Opera 多值 四个值:左上,右上,右下,左下 三个值:左上,右上和左下,右下 两个值:左上和右下,右上和左下 一个值:四个圆角值相同 :定义了右下角的弧度 border-bottom-left-radius:定义了左下角的弧度 2. 、Chrome、Safari6+、Opera不兼容 扩展属性 border-image-source:指定要使用的图像,而不是由border-style属性设置的边框样式 语法:border-image-source -width:指定图像边界的宽度 语法:border-image-width: number|%|auto; border-image-outset:指定在边框外部绘制 border-image-area
它们其实指的是这四个角各自的水平半径和垂直半径。在这个例子中,我们的四个圆角,实际上都是一个半径为 12px 的圆的 1/4 弧。 这样我们也能理解圆的形成了。 实现方式和普通椭圆类似。特点在于上半部分比下半部分要更加扁平,因此左上角和右上角圆角的垂直半径要更长,这里取整体高度的 60%,剩余的 40% 作为左下角和右下角圆角的垂直半径。 这种类型的气泡带有边框和背景颜色,我们仍然可以采用上面的做法即可,但要注意去掉正方形的两个边框。 我们可能很容易想到,两段白色圆弧都分别是一个 1/4 红色圆形的边框,所以可以用下面的方式来做: ? 两个图形的做法类似,都是给矩形设置一个水平半径和垂直半径相差很大的圆角。
下述内容主要讲述了《HTML5权威指南》第19章关于“使用边框和背景”。 CSS3中边框和样式得到了增强。例如:可以创建圆角边框,使用图像边框,为元素创建阴影。 创建圆角边框 可以使用边框的radius特性创建圆角边框。 一对长度值或百分数值,百分数跟边框盒子的宽度和高度相关 border-radius 一次设置四个角的简写属性 一对或四对长度值或百分值,由/字符分割 指定两个半径值即可定义一个圆角,第一个值指定水平曲线半径 ,第二个值指定垂直曲线半径。 属性 说明 hoffset 阴影的水平偏移量 voffset 阴影的垂直偏移量 blur (可选)模糊值 spread (可选)阴影的延长半径 color (可选)阴影的颜色 inset (可选)将外部阴影设置为内部阴影
栅格的起点为左上角(坐标为(0,0))。所有元素的位置都相对于原点来定位。 所以图中蓝色方形左上角的坐标为距离左边(X轴)x像素距离上边(Y轴)y像素(坐标为(x,y))。 }() </script> </html> 绘制三角形边框: <body> <canvas id="canvas" width="300" height="300"></canvas> </body> 绘制圆弧 目前有两种方法可以绘制圆弧: 1.arc(x, y, r, startAngle, endAngle, anticlockwise) 以(x, y)为圆心,以r为半径,从 startAngle 0弧度是指的x轴正方形 radians=(Math.PI/180)*degrees //角度转换成弧度· 1 2.arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧 canvas.getContext("2d"); //开始代码draw(); ctx.beginPath(); ctx.moveTo(50,50); //参数1、2:控制点1坐标 参数3、4:控制点2坐标参数5:圆弧半径
rgba(0, 0, 0, 0.5)':'rgba(0, 0, 0, 0.2)',10,10); // 【圆形内阴影(边框+阴影,再把边框和外阴影裁剪掉)】 // 参数说明:ctx上下文内容,x,y,r 同时又因为线有毛边,所以半径再多加1px,处理毛边。 (0, 0, 250, 0, 2 * Math.PI); // 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度) ctx.stroke(); rgba(0, 0, 0, 0.5)':'rgba(0, 0, 0, 0.2)',10,10); // 【圆形内阴影(边框+阴影,再把边框和外阴影裁剪掉)】 // 参数说明:ctx上下文内容,x 同时又因为线有毛边,所以半径再多加1px,处理毛边。
当设置成YES时,图层里面所有东西都会被截取 边框 边框需要设置layer的两个属性,borderWidth和borderColor,并且边框是沿着图层bounds绘制,同时包含图层的角 borderWidth 在解决这个问题之前,我们还需要了解阴影的另一个特性:阴影是依据view内容的外形确定的,而不是根据边界和角半径来确定,下面放张图来解释一下 ? 上代码 因为圆角、边框、阴影每个效果的设置都需要设置2~4个属性,再加上它们可以两两组合,如果用方法传不同参数来写的化,只方法名都要写半天,所以我机智的用了链式编程的思想来写了一个分类,下面来看一下 // 在使用约束布局时必传 默认CGSizeZero @property(nonatomic, strong, readonly)ConrnerRadius conrnerRadius; // 圆角半径 ,conrnerBounds就不用传了 下面再来一个具体的用法: // 圆角+边框+阴影 UIView *view = [[UIView alloc] initWithFrame:CGRectMake
--2.带边框的圆角元素:--> Rounded corners! <! 为每个角指定弧度 如果只为border-radius属性指定一个值,则此半径将应用于所有4个角。 另外可以根据自己开发的需求,分别指定每个角。 > 实例2: 创建椭圆形的圆角 创建椭圆形的圆角 椭圆边框 :border-radius: 50px/15px #rcorners7 { border-radius: 50px/15px 椭圆边框 : border-radius: 15px/50px #rcorners8 { border-radius: 15px/50px; background: html> 三、总结 1、本文主要讲解了CSS3圆角,通过一些属性的演示,丰富的案例,帮助大家理解CSS知识。
Rounded corners!
属性: fill 属性定义形状的填充颜色 stroke 属性定义图形边框的颜色 stroke-width 属性定义形状边框的宽度 圆形 <circle> <circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”red”/> 解释:cx 和 cy分别为圆点的 x 和 y 坐标;r为半径。 );stroke-width:2″/> 解释:cx 圆点的 x 坐标,cy 圆点的 y 坐标;rx 水平半径,ry 垂直半径。 points=”0,0 0,20 20,20 20,40 40,40 40,60″ style=”fill:white;stroke:red;stroke-width:2″/> 解释:points 属性定义多边形每个角的 :1″/> 解释:points 属性定义多边形每个角的 x 和 y 坐标。
:四边宽度 四边样式 四边颜色; 表格的细线边框 以前学过的html表格边框很粗,这里只需要CSS一句话就可以美观起来。 圆角边框(CSS3) 语法格式: border-radius: 左上角 右上角 右下角 左下角; ? 20的圆弧 */ /* border-radius: 20px; */ /* 设置半径为100 的圆弧(圆) */ /* border-radius : 100px; */ /* 半径为高度和宽度的一半 */ border-radius: 50%; } .juxing { width: 300px; height: 100px; background-color: pink; /* 半径为高度的一半
定义 边框(Border)属性是对HTML元素的边框进行定义的CSS属性。 概述 通过边框的样式设置,给元素增加更丰富的外观 边框的设置包含以下内容: 边框的类型 边框的尺寸 边框的前景背景 圆角边框 列表 元素 描述 border border 属性是规定各种单独的边界属性的简写属性 border-radius border-radius 该属性用作规定边框圆角。一个半径确定一个圆形;当使用两个半径时确定一个椭圆,该椭圆同边框的交集形成圆角效果。 border-top-left-radius border-top-left-radius 该属性是用来规定元素左上角的圆角效果。圆角可以是圆或者椭圆的一部分。若其中有一个值为0,则无圆角效果。 若同时在元素上设置了border-radius,阴影依然有圆角的效果。多个阴影的 z-ordering 和多个 text-shadows 规则相同。 变更点 CSS3增加了圆角边框等众多特效功能.
geometry-box: 单独使用时会将指定框的边缘作为剪裁路径,或者配合 basic-shape 使用,用于定义剪裁的参考框(Reference Box)(由于该属性浏览器支持度比较低,本文暂不讨论 ) 其中 shape-arg 分别为矩形的上右下左顶点到被剪裁元素边缘的距离(和margin、padding参数类似),border-radius 为可选参数,用于定义 border 的圆角。 ) 其中 shape-radius 为圆形的半径,position 为圆心的位置。 ) 其中 shape-radius 为椭圆x、y轴的半径,position 为椭圆中心的位置。 比如,使用在 <clipPath> 中定义一个圆: html: <svg> <defs> <clipPath id="svgCircle"> <circle cx="500" cy
我们只是设置了边框的宽度,用的是 border-width:1px;,但我们并没有是设置颜色,所以我们可以得知,边框的颜色默认是黑色的~ 现在我想要把边框颜色变成红色,那么我会这么做 <style> 嗯,一个圆就这样出来了~其中50% 是指将矩形的长宽的一半作为半径,原点就在两条对角线的交点上,然后对裁剪掉圆外的部分,这样就变成一个圆啦~当然,有个前提条件就是这个矩形必须是正方形,不然得到的就是椭圆了 显示的不是一个圆,我用黑色圆圈标注的两处是直角,对应的参数是0px,用紫色圆圈标注的是曲线,对应的参数是50px。 最后咱们总结一下本文的内容: border-width:边框的宽度 border-color:边框的颜色 border-style:边框的样式 border中宽度、样式、颜色的复合写法 border-radius :边框的圆角
*/ margin-top: 48%; } </style> ② 圆角设置 通过 div 的 border-radius: 20px; 可设置圆角,值为圆角的半径大小。 圆角
<length>:以带单位的绝对值作为半径; <percentage>:以对应border box的尺寸(不是border-width)为参考系,设置半径; 注意:结果值为0(默认值)时,为直角边框 :一次过设置4个角的椭圆半径 ? 从上图我们可以看到4个角分别对应4个独立的椭圆形,而圆角正是4分之1个椭圆。 撸代码! ? 注意 margin/border/padding/content box中相同方向的角的椭圆的圆心重叠; 当椭圆半径为0时,渲染为直角。 通过直角边框找相交线 圆角边框是基于直角边框的,这一点也体现在相邻边框的相交线上。 延长相交线 由于圆角边框不像直角边框那样有棱有角,因此更难以分辨边框样式所对应的边框。但只要我们沿直角边框的相交线向图形内延伸,一切则清晰明了了。
云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。 腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。
扫码关注云+社区
领取腾讯云代金券