纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
分类：
Web程序 时间：
2018-08-04 13:40:48
阅读次数：
306
纯CSS带阴影贴纸标签按钮效果： <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3带阴影贴纸标签按钮样式</title> <style> html { box-sizing: border-box; font: 18px ...
分类：
Web程序 时间：
2018-07-27 21:43:14
阅读次数：
258
垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： 1 2 3 <div class="box box1"> <span ...
分类：
Web程序 时间：
2018-07-27 16:13:52
阅读次数：
186
利用css的：label的伪类（::before）代替checkbox和radio效果 优点：需要图片来调整选中前和选中后的样式，纯css搞定 缺点：兼容性，IE8以下不支持 在线例子: css改变默认的radio和checkbox的样式 input[type="radio"], input[typ ...
分类：
Web程序 时间：
2018-07-20 14:38:31
阅读次数：
151
纯CSS制作的图形效果 很少会有人意识到，当浏览器绘制的border，会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色，其他边框色为透明色，这样我们就很容易制作出三角形，然后改变其大小来实现不同的效果。我们一起来看一段代码： .css-arrow-mul ...
分类：
Web程序 时间：
2018-07-19 19:13:54
阅读次数：
211
微信小程序 纯css手写圆角气泡对话框 以及伪类z-index不生效的解决方法，微信小程序z-index不生效的解决方法 ...
分类：
微信 时间：
2018-07-17 19:16:01
阅读次数：
728
HTML： CSS： 1 .shake{ 2 width: 120px; 3 height: 33px; 4 border-radius: 66px; 5 background-color: #00ff00; 6 border: 0; 7 color: #fff; 8 font-weight: bo ...
分类：
Web程序 时间：
2018-07-16 23:14:02
阅读次数：
1128
日常开发中实现开关，或者更准确说实现单击按钮效果的方法很多，问题是怎么做才能让其更美观的展示在浏览器上。 效果图如下： 之前在网上看过不少实现的方法，其中就有一个是使用纯css3写出来的，以下是纯css代码实现的网站地址：https://proto.io/freebies/onoff/ 以下是该网站 ...
分类：
其他好文 时间：
2018-06-28 19:25:21
阅读次数：
335
在这篇文章里，我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式。 事情是这样的，您的设计师团队向您发送一个新的PSD（Photoshop文档），它是一个新的网站的最终设计。 一切看起来很好，很正常，直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同！你说：“这没 ...
分类：
Web程序 时间：
2018-06-15 15:44:35
阅读次数：
191
以上是结构。说明一下，这样写是为了展示点击文字即可选中的两种方式，因为之前我一直忽略了第二种方法。 css部分也是分开写的，其实基本一样，只是为了更直观看清楚： 改变checkbox： 总结用到的知识点： (1) :after 伪类 : 在元素之后添加内容 (2) content : 配合：befo ...
分类：
Web程序 时间：
2018-06-15 15:43:47
阅读次数：
162
