网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

纯CSS制作圆形,定位图标

时间:2024-11-09 08:23:11

1、HTML制作,早期用背景图片制作圆形,定位图标等是常用方法,优点是可以做到比较精美,但缺点也是比较明显,更改图形大小,需要重做图片,更改颜色也要重做图片。图片效果如图,精美,但制作麻烦,修改大小,颜色也麻烦

纯CSS制作圆形,定位图标

2、现在,较为技术一点的做法,就是用纯CSS去制作各类图形,优点就是大小,颜色可以随意改动,只需要简单的改一二行代码,先通过,HTML, CSS来制作一个圆形,代码,效果,如图:

纯CSS制作圆形,定位图标纯CSS制作圆形,定位图标

3、制作另一个圆形,带外边框,代码,效果,如图:

纯CSS制作圆形,定位图标纯CSS制作圆形,定位图标

4、然后,用HTML, CSS来制作一个三角形,代码,效果,如图:

纯CSS制作圆形,定位图标纯CSS制作圆形,定位图标

5、通过CSS, 把三个图形,叠合在一起,这里关键是用到CSS的定位,完整代码如图:

纯CSS制作圆形,定位图标纯CSS制作圆形,定位图标

6、最终效果如图:通过各类CSS图形的组合,我们可以得到各式各样好看的图形,图标,是我们站点制作的新方法,大家可以发挥自己的创作力,尝试一下。

纯CSS制作圆形,定位图标
© 2025 阿力知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com