border-radius属性怎样画圆

前端迅速发展,前端的技术也是越来越新,可以看到网页上的一些文字也是放在圆形框里面的，那么在网页设计中怎样画圆呢?今天就来看看border-radius属性怎么画圆吧!

操作方法

  • 01

    首先,先确定一个要设置成圆形的属性,这里我就使用div来解释说明。

  • 02

    接着我们设置div的宽高和背景颜色。设置背景颜色是为了更容易观察图形的变化。

  • 03

    如图，我把div设置成了正方形，接着我们开始把它变成圆形。

  • 04

    给div设置属性border-radius为50%，这样div就会由正方形变成圆形哦。需要注意的是，50%以上也是圆形，不会再发生任何改变。

  • 05

    如图，这就是设置后的效果。

  • 06

    当然，我们也可以使用像素来控制，如果使用像素来设置圆形，必须是这个元素宽度或者高度的一半，这样才可以哦。这里我使用的div元素时宽高都是100像素，所以设置成50像素就会变圆。

  • 07

    而在此前我说过，大于元素高度的一半就是圆形，不会再发生变化，那么如果小于一半会怎样呢？比如我设置border-radius为30%。

  • 08

    接着我们看看效果，可以看到，div四周的角就会慢慢像圆形靠近。这样，通过改变border-radius的数值，可以使元素从菱形像圆形靠近哦。

赞 (0)

相关推荐

  • 如何使用PS画圆框（方框）带（填充）颜色

    在使用ps绘制图形时,我们常常需要为绘制的图形填充颜色,下面我们就来看看使用ps画圆框怎么带填充颜色的吧. 操作方法 01 打开ps之后我们按下Ctrl+N键在弹出的对话框内设置我们的需要的参数如图所 ...

  • 几何画板按已知圆的方程画圆的方法

    比如已知圆的方程:x2+y2=32,画圆的方法有以下两种: 方法一 将圆方程进化为2个函数,分别画图像 步骤一 将圆方程进行移项.开平方,化成y=√(9-x2)和y=-√(9-x2)两个简单函数; 步 ...

  • SAI怎么画圆和星星图形?

    SAI小技巧,用SAI画圆和星星的方法. 1.打开sai新建一个画布后, 图层样式里新建一个钢笔图层,点击曲线工具,在画布上点击一下鼠标左键(鼠标不可以移动位置!),按一下键盘上的END键 2.按一下 ...

  • SAI怎么画圆? SAI绘制正圆的教程

    习惯用SAI的人都知道,在SAI中画圆是一个很大的问题,因为没有直接的画圆工具,那么如何才能在SAI上画一个正圆呢? 1.新建文件,点击铅笔工具,将直径拉到最大(可以按住中扩号键调整大小,这样才是最大 ...

  • sai怎么画圆? sai制作圆形头像的教程

    sai中没有画圆工具,该怎么绘制圆形呢?下面我们就阿里看看详细的绘制方法,很简单,需要的朋友可以学习一下. 1.打开sai软件,新建一个画布,选择铅笔工具 2.在画布上点一下,就有一个小圆啦~ 3.选 ...

  • 几何画板图文教程：画圆的内接n边形

    几何画板作为比较受欢迎的几何绘图工具,用它来构造几何图形非常方便.不仅可以借助其中的圆工具.多边形工具来画图,还可以借助其中的强大功能来构造几何图形.比如迭代功能,在几何画板中迭代的控制方式分为两种, ...

  • 几何画板怎么画圆内接三角形?

    圆内接多边形就是指在圆上取几个点作为多边形的顶点,然后依次连接点得到的图形.在黑板上画圆内接多边形还要借助圆规和直尺,这里给大家分享使用专业的几何绘图工具画圆内接三角形. 1.打开几何画板,选择左边绘 ...

  • 电脑白板软件中如何用圆规画圆？

    电脑白板软件中如何用圆规画圆？

    现在软件科技日益趋向完善,可是我们如何在白板中用圆规画图呢?下面就让小编带你们来看看吧!具体如下:1. 首先我们需要点击打开白板软件,2. 下一步点击如图所示右上角的"工具"一栏, ...

  • 用vb来制作屏幕画圆代码

    用vb来制作屏幕画圆代码 . 代码 01 '演示在屏幕上自动画圆的程序.如对参数.变量作改变,将有不同的效果. '申明API函数 Private Declare Function GetWindowD ...