11 2016 档案

摘要:技巧:通过变形属性对容器的形状进行变形,但是保持其内容不变形。 场景:通过skew()变形属性对一个按钮形状的平行四边形进行斜向拉伸。 有几套备选方案: 1. 嵌套元素方案 外部容器元素进行skew()变形,再对内部内容区域元素进行一次反向的skew()变形,这样内容区域会保持原来的形状。 2. 伪 阅读全文
posted @ 2016-11-29 22:44 小碎石 阅读(440) 评论(0) 推荐(0)
摘要:技巧:利用border-radius属性产生圆,椭圆等形状 border-radius按照顺序依次设定border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-rad 阅读全文
posted @ 2016-11-29 22:23 小碎石 阅读(252) 评论(0) 推荐(0)
摘要:技巧:通过一个DIV标签实现边框内圆角效果 背景知识:box-shadow, outline, “多重边框” 背景知识讲解 1. box-shadow box-shadow以逗号分隔列表来描述一个或多个阴影效果,几乎可以用在任何元素上(英文all elements. it also applies 阅读全文
posted @ 2016-11-28 23:56 小碎石 阅读(880) 评论(0) 推荐(0)
摘要:技巧:可以随意的摆放背景图片的位置 背景知识:在CSS2.1时代,我们只能通过background-position设置图片相对于容器左上角的偏移量,这样当容器的尺寸不固定时,只能近视使用百分比实现。那么在CSS3时代,我们有了更好的解决方案。 CSS3时代,background-position属 阅读全文
posted @ 2016-11-28 23:18 小碎石 阅读(240) 评论(0) 推荐(0)
摘要:技巧:实现一个半透明的边框 预备知识 background-clip background-clip 设置元素背景是否延伸到边框下面,如果没有设置背景颜色或者图片,那么这个属性只有在边框设置为透明或者半透明时才能看到视觉效果。否则这个属性造成的样式变化会被元素边框所覆盖。 默认值为 border-b 阅读全文
posted @ 2016-11-28 22:35 小碎石 阅读(191) 评论(0) 推荐(0)
摘要:学习目的:通过JavaScript操控<canvas>对象,实现交互动画。 动画的基本步骤 1. 清空canvas,使用clearRect方法 2. 保存canvas状态 3. 绘制动画图形 4. 恢复canvas状态 操控动画Controlling an animation setInterval 阅读全文
posted @ 2016-11-27 22:20 小碎石 阅读(196) 评论(0) 推荐(0)
摘要:学习目的:使用变形:移动,旋转,缩放栅格,创造出更强大的图形。 状态的保存与恢复Saving and restoring state canvas的状态就是当前画面应用的所有样式和变形的一个快照,canvas的状态被存储在栈中,每当save方法被调用后,当前状态就会被推送到栈中保存。 状态信息包括: 阅读全文
posted @ 2016-11-26 23:00 小碎石 阅读(623) 评论(0) 推荐(0)
摘要:学习目的:学会使用色彩,透明度,线型,渐变,图案和阴影绘制更加吸引人的内容 色彩Color fillStyle = color 设置图形的填充颜色 strokeStyle = color 设置图形的轮廓颜色 color的值可以是字符串,渐变对象或者图案对象,默认情况下,两者都是黑色#000 var 阅读全文
posted @ 2016-11-26 21:50 小碎石 阅读(1230) 评论(0) 推荐(0)
摘要:学习目的:在Canvas上绘制矩形,三角形,直线,圆弧,曲线 栅格 栅格canvas grid,canvas元素默认被网格覆盖,栅格的起点是左上角坐标(0,0),元素的位置都是相对于栅格起点来定位的。 绘制矩形 API提供了三种方法绘制矩形 fillRect(x, y, width, height) 阅读全文
posted @ 2016-11-26 16:16 小碎石 阅读(247) 评论(0) 推荐(0)
摘要:简介 <canvas>是一个可以使用JavaScript在其中绘制图形的HTML元素,可以用于制作照片集或者制作动画。 Canvas默认大小是300px*150px,但是可以使用HTML的高度和宽度属性来自定义Canvas的尺寸。 基本用法 <canvas id="tutorial" width=" 阅读全文
posted @ 2016-11-26 14:21 小碎石 阅读(150) 评论(0) 推荐(0)
摘要:安装 需要安装Ruby, Sass Ruby的安装分两个平台 1. Window平台安装方法: 第一步,去官网 http://rubyinstaller.org/downloads 下载ruby 第二步,安装,选择默认安装即可,安装选项选第二项。 第三步,安装完成后,打开ruby command,调 阅读全文
posted @ 2016-11-21 14:17 小碎石 阅读(215) 评论(0) 推荐(0)
摘要:记:本文可以作为张老师在慕课网上讲解课程的学习笔记 定义 padding:通过查MDN文档可知 the padding property sets the padding space on all sides of an element. The padding ares is the space 阅读全文
posted @ 2016-11-20 14:34 小碎石 阅读(2304) 评论(0) 推荐(0)
摘要:记:本文可以作为张老师在慕课网上讲解课程的学习笔记 定义 line-height:通过查MDN文档可知 对于块级元素,CSS属性line-height指定了元素内部line-boxes的最小高度。对于非替代行内元素,line-height用于计算line box的高度。对于替代行内元素,如butto 阅读全文
posted @ 2016-11-20 00:23 小碎石 阅读(3758) 评论(0) 推荐(0)
摘要:一、可选型 为什么会有可选型?当一个变量被希望表示为某一个指定的类型值,同时也被希望在某种情况下表示为空。那么就需要一个可选型。Optional 可选型的语法是在Swift的基本类型后面添加 ? 符号,如 Int? String? 可选型如果取值为空,那么表示为 nil 如果想定义一个可选型的变量, 阅读全文
posted @ 2016-11-19 22:47 小碎石 阅读(424) 评论(0) 推荐(0)