讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > css教程 >

正文

0

0

CSS制作各种各样的网页图标方法实例

小云云

小云云

发布时间：2018-03-28 10:43:37

|

2384人浏览过

|

来源于php中文网

原创

本文主要和大家介绍了纯css制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。

三角形

平行四边形图标

暂停按钮

暂停按钮的实现原理就是边框用border，里面的正方形用outline。因为outline有一个offset属性可以用来设置偏移量，并且是按照比例来的。

立即学习“前端免费学习笔记（深入）”；

其实如果再将outline-offset的值设置小一点，一个加好就出来了

加号

如果再将其旋转，就变成了一个关闭按钮

关闭按钮

汉堡按钮2：

单选按钮

因为box-shadow会按比例缩放，因此将第一个值设置为白色，然后将第二个值设置的比第一个值大就可以了

圆圈中带个十字

jquery带商品分类侧边栏列表的商城导航菜单
jquery带商品分类侧边栏列表的商城导航菜单

这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。 使用方法 在页面中引入样式文件style.css和jquery.min.js文件。

下载

田型图标

下载箭头

使用border制作三角形，使用box-shadow制作正方形，主要用了偏移

书签

实现这种效果的原理就是讲三角形设置成背景色，这样空心的三角形就出现了

两个半圆图标

这个比较简单，就是通过渐变函数来实现，然后来个圆角边框

禁用图标

外圈利用圆角边框，里面的竖线用渐变来做，然后再用旋转属性即可

左右箭头图标

既然能做出一个三角形，那么就可以做出两个三角形。

需要在Chrome浏览器中打开，因为其他浏览器或许不支持

鹰嘴图标

相关文章

css position 有哪几种取值各自有什么区别_从定位方式和参照物角度说明

css 想实现三栏固定宽布局怎么办_使用 css grid 定义三列固定宽度

css 样式写在多个文件如何管理_css 文件拆分与引入技巧

css动画可以同时执行多个吗_css动画多动画叠加说明

css 同一种颜色为什么在不同屏幕不同_从设备色彩空间角度分析

相关标签:

css chrome border

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：canvas线条的属性解析 下一篇：20道CSS基础面试题

作者最新文章

JS实现的ajax和同源策略详解

2018-05-30 11:59

最新php程序员工具箱 v1.0版本介绍

2018-07-11 14:50

Vue filter介绍及其使用

2018-05-30 14:37

JS 数字和字符串之间相互转化详解

2018-05-31 09:06

Dreamweaver网页中添加电子邮箱链接的实例分享

2018-05-30 15:06

vue-cli 自定义指令directive 添加验证滑块详解

2018-05-31 10:32

PHP之IMAP收取邮件实例详解

2018-05-31 09:37

php基础知识笔记分享

2018-05-30 14:28

Redis常见的使用场景分享

2018-05-31 09:31

微信小程序文件类API详解

2018-05-30 14:22

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发AI 聊天问答
豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发AI大模型
通义千问
通义千问

阿里巴巴推出的全能AI助手

AI 编程开发Agent智能体
腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文档处理AI 聊天问答
文心一言
文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发AI 文本写作
讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作
即梦AI
即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成
ChatGPT
ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发AI 文本写作
智谱清言 - 免费全能的AI助手
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI 编程开发Agent智能体

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思，由Google开发的网络浏览器，它在2008年首次发布，并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容，供大家免费下载体验。

831

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

744

2023.11.06

html边框设置教程
html边框设置教程

本教程将带你全面掌握HTML/CSS边框设置，从基础的border属性讲起，涵盖所有边框样式、圆角设置及高级技巧，帮助你快速上手实现各种边框效果。

36

2025.09.02

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总，涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

165

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口，涵盖备用域名、正版无广告链接及多端适配地址，助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

34

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集，汇总2026年主站及国内优化镜像链接，支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

73

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程，助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

4

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用，涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理，以及在高并发系统中的异步解耦设计。通过实战案例，帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
jquery带商品分类侧边栏列表的商城导航菜单
基于Bootstrap支持移动端的响应式轮播图效果

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 10万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

python大神Mosh，零基础小白6小时完全入门
python大神Mosh，零基础小白6小时完全入门

共50课时 | 3.9万人学习

最新文章

更多
css not 选择器可以组合使用吗_否定选择规则说明
css元素阴影平滑过渡如何实现_利用transition-box-shadow实现
css颜色需要半透明但不影响子元素怎么办_使用rgba颜色替代opacity
css 想让网格容器内容居中怎么办_justify-content center align-content center
css border 不显示是什么原因_边框属性常见问题排查
css grid布局中隐式网格是怎么产生的_通过自动扩展规则说明
css定位与布局的结合_使用position与display优化布局
css inherit 和 initial 有什么区别_属性继承规则解析
css 盒模型 margin auto 不能居中怎么办_通过设置明确宽度实现
css如何让按钮在不同屏幕上等宽显示_使用flex和百分比宽度
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部