页面样式
关注
分享
扫一扫
文章平均质量分 62
車句
行好事 莫问前程
展开
-
CSS: :last-child 与 :first-child的坑
原文链接前言前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器， 但是在实际使用中，要特别需要注意一个点。开始:last-child:指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述）实践HTML:<div class="div1">...原创 2018-07-23 18:34:33 · 60051 阅读 · 3 评论 -
CSS: filter: blur(); 实现高斯模糊效果，不可不知的细节优化
原文链接前言在项目中，要实现如下的效果：页面顶部的设计稿，前面一个卡片式的轮播，后边的背景（是椭圆的一部分）取前面的图片，进行一个高斯模糊的处理。开始前面的轮播部分，使用了第三方的轮播插件，非常好用，推荐给大家（地址）。轮播，不作为今天的主要内容，暂时简单描述下，有机会再详细讲解。有兴趣的同学可以自己试一试，根据插件提供的功能，进行一些样式调整即可。现在开始分析后面背景...原创 2018-07-24 11:20:52 · 99345 阅读 · 3 评论 -
CSS: webpack打包后-webkit-box-orient: vertical;消失了
前言多行文本后隐藏的less代码：.title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex-direction: column;}v...原创 2018-08-03 08:37:48 · 1858 阅读 · 0 评论 -
CSS: nth-child()选择前几个元素
原文链接前言渲染列表时，需要设置前3个元素的margin-top值与其他的不同。使用:nth-child(-n+3){ margin-top: 12px; }扩展 选择前几个元素 /*【负方向范围】选择第1个到第6个 */:nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的 */:nth-c...原创 2018-08-24 11:41:17 · 66257 阅读 · 4 评论 -
CSS: border-radius绘制椭圆
前言设计稿中会有一些上圆弧或下圆弧的样式，需要通过border-radius试一试能不能到达我们想要的效果。开始一般设计师会标注椭圆的宽（一般都是大于屏幕的）高。圆弧是居中的。例如：实践语法描述： border-radius: 1-4 length|% / 1-4 length|%;一般写法： border-radius: 50%;等价于： border-radiu...原创 2018-09-03 09:34:29 · 6072 阅读 · 0 评论 -
CSS: box-shadow+z-index实现层叠式阴影
前言还原设计稿，尊重UI设计师的劳动成果。先来看看：开始今天要研究的就是红框中的3个层叠的阴影。动手编码之前，我们先来分析一下实现的思路。设计师设计的时候应该是对最大的一个进行了缩放，生成两个小一些的放在下边，实现层叠的效果。开发时也可以根据这个思路去实现。 这边他明确给出了相差的宽度，我就把下面两个单独出来，设计圆角时，只设计左下和右下的。实践wxml:/* 最...原创 2018-09-07 09:49:40 · 4524 阅读 · 0 评论 -
CSS: transition和@keyframes动画
前言为了更好的用户体验，在开发时我们使用了适当的动画，实现一些切换的效果。在使用@keyframes时遇到一点问题，于是开始找其他的解决方案，发现了transition很适合。开始先上一张图片，看看要实现的功能，很简单的。就是要实现右侧小三角的旋转实践一开始是使用了@keyframes，看下小程序的代码<view class="arrow"> &l...原创 2018-10-17 11:49:04 · 2189 阅读 · 0 评论