在制作web页面时,如果需要在页面中画一些图形,比如圆形,我们想到的是用图片来代替。而如今CSS完全可以实现这一功能,下面小编就给大家分享如何用CSS画圆形
工具/原料
Visual Studio 2017
方法/步骤
1
首先准备一个空的html结构,然后在其中放置一个空的div,如下图所示
2
然后去除浏览器中一些特有的样式,如下图所示,去除了边距等样式
3
然后去除浏览器中一些特有的样式,如下图所示,去除了边距等样式
4
然后我们给这个样式一个宽高,,并添加一个背景,如下图所示
5
最后,也是最关键的就是给样式添加border-radius属性,其值为宽或高的一半,如下图所示
6
最后运行程序,你就会在界面中看到如下图所示的一个圆形了
7
综上所述,HTML5画圆形首先要定义方形的div,然后设置border-radius为div长度的一半即可