前段时间自己做了『点个赞社区』这个产品，所以接触到移动端的一些小技巧，现在总结如下 一 meta标签篇 移动端开发有很多问题要考虑，包括页面显示和一些特殊的因素，这里就引进我们的<meta>标签 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 这条主要功能是设置视口宽度等于设备宽度，并禁止缩放。 <meta name="format-detection" content="telephone=no" /> 这条禁止将页面中的数字识别为电话号码。 <

今天公司的设计师提交了一个文艺的需求，设计一款文艺头像，如下图 要求是在不切图的情况下（服务器端保存原图）制作折角头像，在鼠标滑过时边框颜色产生变化如下图。 细想之下这个要求简直不科学，因为图片的border怎么会有这种奇怪形状？！ 但是有一个可以偷懒的办法是，整个图片背景色是固定的（如图中是白色） 以下是我的解决方案： ①最底层是头像文件，有一圈10px的红色border ②右下角罩一个三角形，使用z-index来使其浮在图片上边 ③再在最上边罩一个跟底色通过色的三角形，使两个三角形大小差值（露出的那块面积）正好看起来像右下角的border 整体看起来就像下图（就像一个三明治） 那么就会存在两个问题 ①使用图片来遮罩未免有些low，而且如果过后设计告诉我要调整border粗细或者遮罩面积，还得重新作图 ②如何实现当鼠标滑过时头像border和中间层三角形同时变色？ 首先解决第一个问题，在网上找了一圈后发现，很多花里胡哨的图片都能够通过border来绘制 如图，其实一个元素的border是这样的 这是一个50px50px的方块，它border的四个角都是以斜线的方式分割，如果把这个图形设定为0px0px，border都为100px时，是下面这样的 所以如果我想要一个右下角三角形，那么我只需不设左边上边border，如图 嘿嘿，成功！ 接下来解决下一个问题，同时改变 网上搜索答案为 .main:hover .cover {} 其中main为照片的父元素，