Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >CSS3模拟的iphone键盘

CSS3模拟的iphone键盘

作者头像
meteoric
发布于 2019-02-25 08:45:31
发布于 2019-02-25 08:45:31
62100
代码可运行
举报
文章被收录于专栏：游戏杂谈游戏杂谈
运行总次数：0
代码可运行
关联问题
换一批

最终的效果图（仅支持FF 3.6、Chrome 4、Safari 4）：

完整示例代码：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>使用CSS3模拟的iphone键盘</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8">

<style type="text/css">
@font-face {
    font-family: 'iPhone keyboard';
    src: url(http://cahty.googlecode.com/svn/trunk/css/iphone-keyboard.ttf);
}

body {
    margin:0;
    color:gray;
    font-family:Helvetica, Arial, sans-serif;
}

#iphone-keyboard {
    max-width:480px;
    margin:10px auto;
    padding:0;
    overflow:hidden;
    border-top:1px solid #3A3D42;

    background:#757D8A;
    background-image:-moz-linear-gradient(#9098A3, #454f5d);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#9098A3), to(#454f5d));

    box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
}

#iphone-keyboard li {
    text-align:center;
    margin:.5em .1em .25em;
    list-style:none;
}

#iphone-keyboard li:first-child {
    margin-top:.3em;
}

#iphone-keyboard button,
#iphone-keyboard button.specialkey:active {
    color:#3A3D42;
    
    text-decoration:none;
    text-align:center;
    text-shadow:0 1px 1px white;
    font-weight:bold;
    
    border:0;
    border-top:1px solid rgba(255,255,255,.45);        
    
    background:#ECEDEF;
    background-image:-moz-linear-gradient(#f8f8f9, #dddfe1);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f9), to(#dddfe1));
    
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    
    box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
    -moz-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
}

#iphone-keyboard button {
    display:inline-block;
    width:8.6%;
    margin:0 .25%;
    padding:.02em 0 .03em;
    
    color:black;
    
    font-size:1.35em;
    font-family:Helvetica, Arial, sans-serif;
}

#iphone-keyboard button:active,
#iphone-keyboard button.space:active {
    background-image:-moz-linear-gradient(#E2E3E4, #AAADB4);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#E2E3E4), to(#AAADB4));
}

#iphone-keyboard button.specialkey {
    background:#757D8A;
    background-image:-moz-linear-gradient(#7f8792, #535b68);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#7f8792), to(#535b68));
    
    color:white;
    text-shadow:0 -1px 1px rgba(0,0,0,.5);
}

#iphone-keyboard button.space,
#iphone-keyboard button.return,
#iphone-keyboard button.numbers,
#iphone-keyboard button.international {
    font-size:1.04em;
    padding:.25em 0;
}

#iphone-keyboard button.shift,
#iphone-keyboard button.international,
#iphone-keyboard button.backspace {
    font-family:'iPhone keyboard', Helvetica, sans-serif;
}

#iphone-keyboard button.shift,
#iphone-keyboard button.backspace {
    background-image:-moz-linear-gradient(#939ba6, #687180);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#939ba6), to(#687180));
}
    
#iphone-keyboard button.shift {
    width:12%;
    float:left;
}

#iphone-keyboard button.backspace {
    width:12%;
    float:right;
}

#iphone-keyboard button.numbers {
    width:8.4%;
    margin-right:1.4%;
    float:left;
}

#iphone-keyboard button.international {
    width:8.2%;
    float:left;
}

#iphone-keyboard button.space {
    width:59%;
    color:#525c69;
    
    background-image:-moz-linear-gradient(#dddfe2, #b4b8bf);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#dddfe2), to(#b4b8bf));
}

#iphone-keyboard button.return {
    float:right;
    width:18.9%;
}

</style>

 </head>

 <body>
  

<ul id="iphone-keyboard"> 
    <li> 
        <button type="button">Q</button> 
        <button type="button">W</button> 
        <button type="button">E</button> 
        <button type="button">R</button> 
        <button type="button">T</button> 
        <button type="button">Y</button> 
        <button type="button">U</button> 
        <button type="button">I</button> 
        <button type="button">O</button> 
        <button type="button">P</button> 
    </li> 
    <li> 
        <button type="button">A</button> 
        <button type="button">S</button> 
        <button type="button">D</button> 
        <button type="button">F</button> 
        <button type="button">G</button> 
        <button type="button">H</button> 
        <button type="button">J</button> 
        <button type="button">K</button> 
        <button type="button">L</button> 
    </li> 
    <li> 
        <button type="button" class="specialkey shift">S</button> 
        <button type="button">Z</button> 
        <button type="button">X</button> 
        <button type="button">C</button> 
        <button type="button">V</button> 
        <button type="button">B</button> 
        <button type="button">N</button> 
        <button type="button">M</button> 
        <button type="button" class="specialkey backspace">B</button> 
    </li> 
    <li> 
        <button type="button" class="specialkey numbers">123</button> 
        <button type="button" class="specialkey international">I</button> 
        <button type="button" class="space">space</button> 
        <button type="button" class="specialkey return">return</button> 
    </li> 
</ul> 

 </body>
</html>

使用了CSS中的：字体、渐变、阴影。

在本页面直接运行查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用CSS3模拟的iphone键盘</title> <style type="text/css"> @font-face { font-family: 'iPhone keyboard'; src: url(http://cahty.googlecode.com/svn/trunk/css/iphone-keyboard.ttf); } body { margin:0; color:gray; font-family:Helvetica, Arial, sans-serif; } #iphone-keyboard { max-width:480px; margin:10px auto; padding:0; overflow:hidden; border-top:1px solid #3A3D42; background:#757D8A; background-image:-moz-linear-gradient(#9098A3, #454f5d); background-image:-webkit-gradient(linear, left top, left bottom, from(#9098A3), to(#454f5d)); box-shadow:0 1px 0 rgba(255,255,255,.3) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset; -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset; } #iphone-keyboard li { text-align:center; margin:.5em .1em .25em; list-style:none; } #iphone-keyboard li:first-child { margin-top:.3em; } #iphone-keyboard button, #iphone-keyboard button.specialkey:active { color:#3A3D42; text-decoration:none; text-align:center; text-shadow:0 1px 1px white; font-weight:bold; border:0; border-top:1px solid rgba(255,255,255,.45); background:#ECEDEF; background-image:-moz-linear-gradient(#f8f8f9, #dddfe1); background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f9), to(#dddfe1)); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3); -moz-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3); } #iphone-keyboard button { display:inline-block; width:8.6%; margin:0 .25%; padding:.02em 0 .03em; color:black; font-size:1.35em; font-family:Helvetica, Arial, sans-serif; } #iphone-keyboard button:active, #iphone-keyboard button.space:active { background-image:-moz-linear-gradient(#E2E3E4, #AAADB4); background-image:-webkit-gradient(linear, left top, left bottom, from(#E2E3E4), to(#AAADB4)); } #iphone-keyboard button.specialkey { background:#757D8A; background-image:-moz-linear-gradient(#7f8792, #535b68); background-image:-webkit-gradient(linear, left top, left bottom, from(#7f8792), to(#535b68)); color:white; text-shadow:0 -1px 1px rgba(0,0,0,.5); } #iphone-keyboard button.space, #iphone-keyboard button.return, #iphone-keyboard button.numbers, #iphone-keyboard button.international { font-size:1.04em; padding:.25em 0; } #iphone-keyboard button.shift, #iphone-keyboard button.international, #iphone-keyboard button.backspace { font-family:'iPhone keyboard', Helvetica, sans-serif; } #iphone-keyboard button.shift, #iphone-keyboard button.backspace { background-image:-moz-linear-gradient(#939ba6, #687180); background-image:-webkit-gradient(linear, left top, left bottom, from(#939ba6), to(#687180)); } #iphone-keyboard button.shift { width:12%; float:left; } #iphone-keyboard button.backspace { width:12%; float:right; } #iphone-keyboard button.numbers { width:8.4%; margin-right:1.4%; float:left; } #iphone-keyboard button.international { width:8.2%; float:left; } #iphone-keyboard button.space { width:59%; color:#525c69; background-image:-moz-linear-gradient(#dddfe2, #b4b8bf); background-image:-webkit-gradient(linear, left top, left bottom, from(#dddfe2), to(#b4b8bf)); } #iphone-keyboard button.return { float:right; width:18.9%; } </style> </head> <body> <ul id="iphone-keyboard"> <li> <button type="button">Q</button> <button type="button">W</button> <button type="button">E</button> <button type="button">R</button> <button type="button">T</button> <button type="button">Y</button> <button type="button">U</button> <button type="button">I</button> <button type="button">O</button> <button type="button">P</button> </li> <li> <button type="button">A</button> <button type="button">S</button> <button type="button">D</button> <button type="button">F</button> <button type="button">G</button> <button type="button">H</button> <button type="button">J</button> <button type="button">K</button> <button type="button">L</button> </li> <li> <button type="button" class="specialkey shift">S</button> <button type="button">Z</button> <button type="button">X</button> <button type="button">C</button> <button type="button">V</button> <button type="button">B</button> <button type="button">N</button> <button type="button">M</button> <button type="button" class="specialkey backspace">B</button> </li> <li> <button type="button" class="specialkey numbers">123</button> <button type="button" class="specialkey international">I</button> <button type="button" class="space">space</button> <button type="button" class="specialkey return">return</button> </li> </ul> </body> </html> 预览代码

Demo参考至：http://leaverou.me/demos/iphone-keyboard/

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2011-06-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
html

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

html
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
1517
Go 开发者必备：Protocol Buffers 入门指南
736
10分钟带你彻底搞懂分布式链路跟踪
392
多租户的 4 种常用方案
906
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
671
60页PPT全解：DeepSeek系列论文技术要点整理
1383
简约商务风格登录页H5【源码】
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Login Form</title> <style type="text/css"> .btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333
小黑同学
2020/11/24
4890
css3写的一些背景笔记
css
该文章介绍了如何使用CSS3和JavaScript实现条纹和图案的网页设计，包括各种条纹和图案的样式以及对应的JavaScript代码。
练小习
2017/12/29
7460
纯JS写一个用苹果序列号查询生产信息的小工具
iosiphone
苹果手机是目前比较火或者说是一直很火的手机，但是和人一样，人火是非多，东西也是，所以我们买苹果手机的时候都喜欢查询一下是什么时间出的，什么地方出的，但是奈何还要看很多的资料，登录这里那里去查询，有的更恶心的，还要你关注什么微信号才给你说，我也是一个果粉，所以我查看了一下苹果手机序列号的规则，决定做一个小的工具，可以直接查询手机的生产地和具体时间。今天我们就一起做一个！
何处锦绣不灰堆
2020/05/29
1.4K0
纯JS写一个用苹果序列号查询生产信息的小工具
一款css3很美的iphone注册表单样式
javahttps网络安全html
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/120773.html原文链接：https://javaforall.cn
全栈程序员站长
2022/07/15
3350
CSS3制作3D水晶糖果按钮
其他
本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon（Candy）Button实现了其棒棒糖果按钮，如下图所示：
恋喵大鲤鱼
2018/08/03
9060
CSS3制作3D水晶糖果按钮
CSS3实现各种纹理背景效果
<!DOCTYPE html> <head> <title>CSS3实现各种纹理背景效果_网页代码站(www.webdm.cn)</title> <style> body{font-family: Georgia, serif;}.stripes{height: 250px;width: 375px;float: left;margin: 10px;-webkit-background-size: 50px 50px;-moz-background-size: 50px 50px;background-si
py3study
2020/01/14
1.3K0
<hr>两边淡化效果。
css
hr.normal { background: #ddd;/*改变现代浏览器下线条色*/ color: #ddd;/*改变ＩＥ浏览器下线条色，最好和Background-color设置一样的色*/ clear:both;/*可以用来清除浮动*/ float: none;/*取消浮动，可以不设置*/ width:
xiny120
2020/05/18
3400
Typecho美化主题教程
css
但是现在我们会发现，整个网站的标签都变成了这样，那我们如何只让他在文章中出现呢？ 在第一个代码块ol前面加上#post即可使用了。
回忆大大
2021/08/09
1.5K0
WordPress网站如何实现一键复制（附JS代码）
htmljavascripthttps网络安全css
WordPress网站添加一键复制指定内容，方法其实很简单，给大家分享一个通过JS代码实现一键复制指定内容的教程。
主机教程网2bcd.com
2022/09/03
2.3K0
用css3制作一个精美的表盘，建议初学者观看
css
点击链接查看效果https://ihope_top.gitee.io/my-demo/demo/1/
十里青山
2022/08/22
8380
用css3制作一个精美的表盘，建议初学者观看
纯CSS设计按钮
htmlcss3opera浏览器
完全兼容不支持css3的浏览器，若不兼容css3，则显示没有渐变和阴影的普通按钮。
Petterp
2022/02/09
1K0
css3按钮
css
步骤 一、做出圆角图形 二、在圆角图像实现渐变 三、给图形加阴影 四、给文字加阴影 css .button { display: inline-block; outline: none; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); /*文字阴影*/ -webkit-border-radius: .5em; /*圆角*/ -moz
码客说
2019/10/22
8260
css 常用代码分享
csshtml编程算法
3. 去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框
用户7705674
2021/09/22
9100
7b2美化-首页添加导航会员区块
网站
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
小狐狸说事
2022/11/17
7980
仿Google+的Circle功能
httpgithubgit开源
http://www.circlehack.com/ (qiang外)是facebook四个工程师通宵一晚上的成果，体验和效果上和Google+中的circle相比还是逊色一些
meteoric
2019/02/25
6750
仿Google+的Circle功能
BUTTONS V. 2.0.0——CSS按钮库
开源
参考资料 BUTTONSV. 2.0.0 Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。
小蔚
2019/09/12
6820
Switch游戏机模型
源码
一，Switch游戏机 1，大家好，我们老样子先放运行的照片放在下面。 2，看到上面的Switch游戏机有没有想快点想拿到源码的感觉，大家不要急，不妨先给我点个赞，如果给个关注那就更好了，谢谢大家！Switch游戏机代码如下，请大家自行观看。 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>海拥 | Switch游戏机</title> <link rel='stylesheet' href='https://c
海曈
2022/11/14
5390
Switch游戏机模型
WordPress酷炫CSS3读者墙，排名按年度、本月、本周划分的小方法
wordpress云数据库 SQL Servercss
WordPress 酷炫 CSS3 读者墙这个玩意一般不用我多说，大部分用 WordPress 的博主都了解过了，出自折子戏博客。 不过他这个读者墙的排行是按年度划分的，也就是一年内的留言数排行。为了
张戈
2018/03/23
9020
【前端小白进阶】CSS生成工具，网页提示箭头
csshtml
主要代码预览： HTML代码: <form class='configuration'> <h2>Arrow configuration</h2> <div class='clr'> <ol class='section positions'> <li> <label>Position</label> <label><input type="radio
用户5997198
2020/05/12
7110
【解疑答惑】css中经常被忽略的代码陷阱
css
css大家都认为是很简单东西，但是是代码就有让人头疼的时候，只是多少的问题，伴着小编走过的路，在前端多少也滚了一些坑，今天为了方便后来者，把收集到的东西跟大家分享一下，有需要的朋友可以当作参考，希望对各位盟友有帮助： 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两
程序员互动联盟
2018/03/13
6570
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
怎么运行前台模拟键盘按键转发的软件啊？Xcode 6：键盘不显示在模拟器中？语音识别sdk在iphone13.7模拟器下报错？
相关课程
腾讯云开发玩转小程序实战训练营AI驱动的TDSQL-Cserverless实战营前端
简约商务风格登录页H5【源码】
4890
css3写的一些背景笔记
7460
纯JS写一个用苹果序列号查询生产信息的小工具
1.4K0
一款css3很美的iphone注册表单样式
3350
CSS3制作3D水晶糖果按钮
9060
CSS3实现各种纹理背景效果
1.3K0
<hr>两边淡化效果。
3400
Typecho美化主题教程
1.5K0
WordPress网站如何实现一键复制（附JS代码）
2.3K0
用css3制作一个精美的表盘，建议初学者观看
8380
纯CSS设计按钮
1K0
css3按钮
8260
css 常用代码分享
9100
7b2美化-首页添加导航会员区块
7980
仿Google+的Circle功能
6750
BUTTONS V. 2.0.0——CSS按钮库
6820
Switch游戏机模型
5390
WordPress酷炫CSS3读者墙，排名按年度、本月、本周划分的小方法
9020
【前端小白进阶】CSS生成工具，网页提示箭头
7110
【解疑答惑】css中经常被忽略的代码陷阱
6570
相关推荐
简约商务风格登录页H5【源码】
更多 >
meteoric0
LV.1
这个人很懒，什么都没有留下～
文章
428
获赞
961
专栏
1
作者相关精选
换一批
加入讨论
的问答专区 >
喵喵侠
1KOL擅长5个领域
相关课程
一站式学习中心 >
云开发微搭低代码平台-一人构建企业级应用实战训练营
1876人在学
腾讯云微搭低代码
云开发
前端
1246人在学
前端
大数据
490人在学
大数据
领券
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
2
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验