用Css如何制作圆形?

网页开发中,经常会用到一些小图标,比如一些箭头之类的,圆形图标也是经常用到的,很多时候这些图标都是直接使用图片来处理。
我们这里介绍一下用css来制作圆形图标,而不是用图片。下面一起看下。

操作方法

  • 01

    首先看下我们的html代码,很简单,就是一个div,用这个div来呈现一个圆, <div class="css_yuan"></div>

  • 02

    然后是css样式代码,代码里关键是通过样式中的border-radius来让div呈现圆形,因为边角的弧度足够大,就会显示成一个圆了 .css_yuan{ background-color: #69c51b; border-radius: 30px; height: 60px; width: 60px; }

  • 03

    看下页面效果,一个标准的圆。

  • 04

    通过设置不同的长度和宽度,我们可以生成不同大小的圆。我们加多一个div显示另一个更大的圆,样式如图,二者样式不同的地方是width和height的值不一样。还有border-radius也不同,大一点的圆,边角弧度肯定要更大一点,才会显示为圆了。 <div class="css_yuan"></div> <div class="css_yuan2"></div>

  • 05

    看下这二个圆的显示效果。

  • 06

    除了大小可以更改,颜色也是可以更改的,我们的圆的颜色主要是取决于div的背景色。所以改变这个背景色就行了。 我们这里把大圆的背景色改一下。 background-color: #F0951C;

  • 07

    效果如图,css制作的圆可以很方便的更改大小,颜色。而以图片制作的圆要更改的话,就只能重新制作图片了。

(0)

相关推荐

  • 美图秀秀怎么制作圆形QQ/微信头像?

    经常在手机QQ、微信上会看到好友的头像是圆形的,感觉非常个性,那么怎么制作圆形头像?下面我们为大家分享一个美图秀秀制作圆形头像教程。 1、制作头像或是图片必备神器之一当然是美图秀秀啦,没有美图秀秀的童 ...

  • WPS怎样制作圆形放大镜效果

    WPS演示制作圆形放大镜的教程: 一般来说,放大镜效果就是将缩略图局部放大突显出来的效果.看看下面这个图就明白了. 如果借助Photoshop等专业工具,制作这个效果非常容易--在Photoshop中 ...

  • PowerPoint制作圆形字环绕效果的幻灯片

    前一段时间在百度知道答题,看到有人问怎么用PowerPoint制作类似圆形环绕效果的幻灯片,当时没想起来怎么做.后来休息的时候,想到了一个方案,和大家分享一下,不会的朋友可以来参考一下: 最终效果图: ...

  • ae怎么制作圆形的遮罩动画?

    ae中想要制作一个圆形动画,该怎么制作这种这个效果的动画呢?下面我们就来看看详细的教程. 1.我们打开我们画好素材 2.新建合成,并把相关动画整理完毕 3.我们新建一个形状图层 4.在图层属性上选择m ...

  • Premiere怎么制作圆形画面的视频?

    Premiere中想要制作圆形画面的视频效果,该怎么制作呢?下面我们就来看看详细的教程. 一.基本操作 1.打开pr,在“项目”面板空白处右击鼠标,选择“导入”,将视频素材导入,将视频拖拽到v1轨道上 ...

  • AE怎么制作圆形音乐频谱线?

    如图这是最终效果,通过AE我们可以根据音乐制作圆形的频谱线,是不是很酷炫呢,效果如下图.汤圆通过一个示例教下大家. 1.首先我们先登录AE,添加所需要的音乐和背景图片 2.新建一个合成组,合成组持续时 ...

  • WPS Office怎么制作圆形进度条动画?

    WPS Office中想要制作进度条动画,该怎么制作这个动画效果呢?主要用到插入形状和轮子的动画功能,下面我们就来看看详细的教程. 1.首先,在新建立的WPS Office演示文档中右击工作区,点击背 ...

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

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

  • premiere怎么给视频制作圆形的遮罩效果?

    一般电视或者电影后面都有小彩蛋,喜欢使用圆形的镜头来展示人物,这就是遮罩的效果,下面我们就来看看premiere制作圆形遮罩的教程. 1.先打开premiere,然后把你要遮罩的视频放到视频一轨道. ...