IOS端微信小程序 CSS3图片变色、drop-shadow不显示等问题

ios端会有一个问题，就是图片被隐藏后派陪数，drop-shadow有时候会失效，就是被隐藏的不会被渲染，所以需要给图片加上border-right 值，这尘首样虽然图片被“overflow: hidden”了，但是border还在外边，这样就会被渲染。

安卓和网页端相关乱正没有border-right依然能正常显示。

1、打开开发者工具，在项目的pages文件夹下，新建mypage文件夹，并在文件夹内新建mypage，并在app.json中将mypage设为第一页面。

2、在mypage.wxml中写代码如下。

3、保存代码，在模拟器中查看效果如下图。

4、在mypage.wxss中添加代码如下：view{overflow-wrap: break-word}。

5、保存代码，就实现了自动换行，注意view默认枝悔蔽的display为block。

6、mypage.wxss不用改，再把内容改猛州为中文测试一下，修改前斗mypage.wxml。

7、保存代码，查看模拟器如下图，中文也实现了自动换行。

像我这样的程序员来说经常被设计这个词吓到，因为我是一名程序员而不是设计师，虽然只是一名程序员，但我还是想让自己的网站看起来更加吸引人。虽然比不上真正由设计师 *** 刀做出来的效果，但对像我这种没有设计能力的人来说还是很有帮助的。可是程序员如何快速制作一个漂亮大气的网站呢？一、色调在有着设计师存在网站，设计师都会负责进行网站色调的调整，为了保证网站的一致性，所有按钮和导航一般是三到四种颜色。二、纹理知道如何让一个网站看起来更加高雅优雅一些吗？是的，纹理。但是这些纹理效果应该去哪里寻找呢？设计师Atle Mo 的Subtle Patterns网站是个不错的去处，我们接下来就使用这个网站上的Cream Dust纹理。点击下载，将纹理图片保存到本地，然后放到根目录下的/img/ 目录文件夹中，最后到CSS 样式表中加入代码body { background: url (/img/cream_dust.png) repeat 0 0} 即可。三、字体修改网页字体是让网站看起来更有特色、有现代感的捷径，我们可以去谷歌的字体服务（免费正版）中随意挑选自己喜欢的字体，但是要注意字体间的搭配。在网页头部中加入此代码：在CSS 样式表custom.css 中加入以下代码：h1, h2, h3, h4, h5, h6 {font-family: 'Corben'，Georgia, Times, serif} p, div {font-family: 'Nobile'，Helvetica, Arial, sans-serif}添加完后刷新即可查看效果了，现在我们的网站样式已经变了，看起来比默认好多了。此外，除了谷歌的字体服务外还可以使用像Fontdeck或Typekit字体服务，它们的字体更多。四、背景图片首先需要灶亮下载背景图片，然后放到/img/ 文件目录中去。1、将此悄态图片设置为的背景图(background-image): $.backstretch (/img/winter.jpg)2、加入背景图后网页主题部分会产生遮挡，所以可以让其透明，这样网站效果看起来会更加现代、有设计感。这里可以使用这个技巧将网站变得透明，代码见右边，.container-narrow {background: url (/img/cream_dust_transparent.png) repeat 0 0}五、CSS将上面都搞定后接下来要做的就是再加点CSS特效了，如果时间不够的话简单的添加上盒阴影box-shadow和字体阴影text-shadow就可以让网站增色不少，CSS 代码如下。h1 { text-shadow: 1px 1px 1px #ccc} .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc}如果经历过了上面所说的流程的话，相信你已经启辩源可以在比较短的时间内制作出了一个还能拿得出手的网站了。

---