你是不是有时候看到一个网页上的文字特别好看，或者某个按钮的样式很吸引人，想知道它是怎么实现的？其实用浏览器自带的F12功能，几秒钟就能查到。这个技巧不仅设计师、程序员常用，普通用户想改改页面、学点前端知识也很实用。
打开F12开发者工具
在大多数浏览器里，比如Chrome、Edge、Firefox，直接按键盘上的 F12 键就能打开开发者工具。也可以右键点击你想查看的元素，选择“检查”或“检查元素”，工具面板就会自动弹出来，并定位到对应的位置。
找到你要看的样式
打开F12后，左边是网页内容的HTML结构，右边通常会显示对应的CSS样式。你可以把鼠标移到HTML标签上，页面中对应的区域会高亮显示，方便你确认位置。
比如你看中了一个蓝色的标题，右键它并选择“检查”，页面下方或侧边的开发者工具就会跳转到这个标题的代码：
<h2 class="title-blue">这是个漂亮的标题</h2>查看右侧的样式面板
选中这个元素后，在右边的“Styles”或“样式”标签页里，就能看到所有应用在这个元素上的CSS规则。比如：
.title-blue {
color: #0066cc;
font-size: 24px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}这些就是让它看起来漂亮的关键。你可以一条条点击查看，甚至临时修改试试效果。比如把 color 改成 red，标题立马变红，改完不满意还能撤销。
看看样式从哪来
有时候你会发现某条样式线划掉了，说明它被后面的规则覆盖了。这叫“层叠”，是CSS的特点。你还能看到样式后面标注了文件名和行号，比如 style.css:35，点进去就能看到原始代码写在哪。
如果你用的是Chrome，还可以在“Computed”（计算样式）选项卡里看到这个元素最终渲染的所有属性，不管它是从哪个class继承来的，一目了然。
小技巧：临时修改页面试试效果
想换个背景色看看？直接在样式面板双击颜色值，输入新颜色就行。改字体、调边距也一样操作。虽然刷新就没了，但用来学习或临时美化页面特别方便。
比如公司内部系统界面太丑，你可以用F12临时调一下字号和间距，看得舒服点，不影响别人。
不同浏览器都支持吗
主流浏览器基本都行。Chrome和Edge用起来最顺，Firefox的开发者工具也很强大。Safari稍微麻烦点，需要先在偏好设置里开启“开发”菜单，之后才能用F12或通过菜单打开。
手机浏览器一般不支持F12，但可以在电脑上用开发者工具切换成手机视图，模拟移动端效果，适合看响应式设计是怎么工作的。