摘要：
为了判断浏览器是否支持css3的一些新属性样式，当不兼容该样式的时候，我们可以更优雅的降级处理。这就需要使用到css3的条件判断功能：在css中支持@supports标记、或者在js中使用CSS.supports函数，来检测浏览器是否支持css3的新属性。下面就来看看如何实现的！ CSS @supp 阅读全文
随笔分类 - CSS3+HTML5
还在拼字符串？试试HTML5的template标签
2019-12-21 13:16 by 盛世游侠, 834 阅读, 收藏,
摘要：
HTML5中<template>标签的详细介绍（图文） HTML5中<template>标签的详细介绍（图文） 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一、HTML5 template元素初面 <template>元素，基本上可以确定是 阅读全文
弹性盒子模型子元素垂直和水平居中
2018-03-05 16:38 by 盛世游侠, 12208 阅读, 收藏,
摘要：
history.pushState({ title: attrs.title }, attrs.title, urlStr); history.pushState({ title: document.title }, document.title, urlStr); 阅读全文
10种CSS3实现的Loading效果
2017-03-01 17:42 by 盛世游侠, 596 阅读, 收藏,
摘要：
原文链接：http://www.cnblogs.com/jr1993/p/4622039.html 第一种效果： 代码如下： CSS代码： 第二种效果： HTML代码 CSS代码 第三、四、五种效果 HTML代码 CSS代码 第六、七、八种效果 HTML代码 CSS代码 第九、十种效果 阅读全文
canvas元素大小与绘图表面大小
2016-06-14 12:16 by 盛世游侠, 4442 阅读, 收藏,
摘要：
原文链接：canvas总结：元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height： 1 <canvas id="myCanvas" width="300" height="150">browser don't support canva 阅读全文
HTML5实现“摇一摇”效果
2016-05-13 16:52 by 盛世游侠, 414 阅读, 收藏,
摘要：
在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。 而通过DeviceMotion对设备运动状态的判断，则可以 阅读全文
CSS3弹性盒模型布局模块介绍
2014-03-18 20:26 by 盛世游侠, 347 阅读, 收藏,
摘要：
来源：Robert’s talk原文：http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/Web布局一直个是难点，但貌似现在我们有更好的选择了。背景首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局。然后是现在大多数人都在使用的浮动布局。我们可以使用任何我们想用的元素,但浮动并不适用于初学者。表面上它看起来很基础,但背后复杂的功能可以使经验丰富的开发者看着自己的屏幕 阅读全文
不用图片，纯Css3实现超酷的类似iphone的玻璃气泡效果
2014-03-18 20:25 by 盛世游侠, 356 阅读, 收藏,
摘要：
最近在一个私活做手机项目时候，需要实现一个类似ios 6中短信那样的气泡效果。这里分享下实现心得，希望能给大家一点启发。首先分析下iphone的气泡效果有一下特点1. 四面圆角2. 界面上向下的外阴影3. 上边和下边的内阴影4. 上边内的一个内嵌的玻璃气泡的反光效果因为文字的长度、高度，内容多少都未知，所以如果用图片，会涉及到了多张拼贴，而且效果不好，所以就选择了CSS3。首先定义一个容器，盒模型为display: inline-block，方便自适应文字大小.bubble {position: relative;display: inline-block;min-width: 30px;ma 阅读全文
每天一点css3聚沙成塔（一）：transition
2013-10-29 19:51 by 盛世游侠, 261 阅读, 收藏,
摘要：
transition语法：transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]默认值：看每个独立属性取值：[ transition-property ]：检索或设置对象中的参与过渡的属性[ transition-duration ]：检索或设置对象过渡的持续时间[ transition-timing-function ]：检索或设置对象中过渡的动画类型[ transition-delay ]：检索或设置对象延迟 阅读全文
浙公网安备 33010602011771号