随笔分类 - CSS
摘要：UIView和CAlayer之间的关系 UIView 负责响应事件 CALayer负责绘制UIUIView对CALayer封装属性 我们一般访问的frame center 等属性 其实内部会访问相应的CALayer属性 但是设置阴影 圆角 还是得考直接访问CALayer的属性来完成每个UIView
阅读全文
摘要：3D转换之移动 3D移动在2D移动的基础上多加了一个可以移动的方向,就是Z轴方向 语法: transform: translateX(100px); transform: translateY(100px); /* 注意这个我们一般使用px单位 */ transform: translateZ(10
阅读全文
摘要：动画 动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画。通常用来实现复杂的动画效果 相比较过度，动画可以实现更多变化，更多控制，连续自动播放等效果。 1.1动画的基本使用 1.先定义动画 2.在使用(调用)动画 定义动画 @keyframes
阅读全文
摘要：转换(transform)是CSS3中最具有颠覆性的特征之一,可以实现元素的位移 旋转 缩放等效果。可以简单的理解为变形。 移动:translate 旋转:rotate 缩放:scale 2D转换是改变标签在二维平面上的位置和形状的一种技术。在X轴和Y轴进行变形。 移动语法: transform:
阅读全文
摘要：一 CSS3 现状 在CSS2的基础上新增扩张的样式 移动端支持优于PC端 不断改进中 应用相对广泛 1.1 CSS3中新增的选择器 1> 属性选择器 代码示例 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
阅读全文
摘要：一 CSS布局的三种机制 1.标准流 2.浮动(盒子脱离标准流 浮起来 盒子水平排列) 3.定位(将盒子定在某一位置 自由的漂浮在其他盒子上面 css 离不开定位 特别是js特效) 二 为什么使用定位 要实现以上效果，不使用定位是非常困难的 将盒子定在某一个位置，自由的漂浮在其他盒子(包括标准流和浮
阅读全文
摘要：一 IE6 ,7不支持小于12px的盒子 浏览器中的 hack问题 https://www.cnblogs.com/mumble/p/4576489.html 所以第一个例子就可以修改成这样的 解决微型盒子的正确写法 比如隔墙法 和 内墙法 IE6不支持用 overflow:hidden清除浮动 解
阅读全文
摘要：随笔记一下 一个浮动的元素 如果没有设置宽高 将会自动收缩为文字的宽高 脱标 贴边 字围 收缩 浮动有开始 就要有清除 效果 可以看到div作为一个块级元素 竟然没有两行显示 第二个div中的li去贴第一个div的边了 可以看到浮动和浮动之间还是有关系的（第二个div中的li去贴第一个div的边了）
阅读全文
摘要：继承性 打开会发现p的字体也是蓝色的，浏览器的查看说是继承于div 有一些属性，当给自己设置的时候，自己的后代也同时拥有了这个属性，这就是继承性 但是并不是所有的属性都具有继承性 只有以color,text,line,font开头的具有这些特性 继承性从大贯穿到最小的元素 所以，如果我们的页面是统一
阅读全文
摘要：CSS3多列 通过CSS3 我们能够创建多个列来对文本进行布局。 在这篇文章中 你将了解到如下多列属性： column-count column-gap column-rule 浏览器支持： 多列的属性： 实例：
阅读全文
摘要：CSS3动画： 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript。 CSS3 @keyframes 规则如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规
阅读全文
摘要：通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。请把鼠标移动到下面的元素上： 先看一下这个代码 实现旋转放大的效果： 先看一下 关于 transition的属性 如果简写的话 就可以这样写： 例如: 表示同时过度
阅读全文
摘要：2、scaleX(<number>) ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如：transform:scal
阅读全文
摘要：text-shadow 语法 取值: <length>：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值 <color>：指定阴影颜色，也可以是rgba透明色 <shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。 如下图
阅读全文
摘要：CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。 1.多个背景图片 在CSS3里面 你可以在一个标签元素里应用多个背景图片 代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素
阅读全文
摘要：CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 。 CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴影 border-image 用图片绘制边框 CSS3圆角边框例子： 在 CSS2 中添加圆角矩形需
阅读全文
摘要：CSS 后代选择器 后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。 根据上下文选择元素 我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对 h1 元素中的 em
阅读全文
摘要：CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 例子2 与上面类似 可以只对有href属性的锚应用样式 例子3还可以根据多个属性进行选择 只需将属性选择器链接在一起就可以 例子4 可以采用一些创造性的方法来使用这个特性
阅读全文
摘要：CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的标记文档后 才能使用这些选择器 所以使用这两种选择器 通常要做一些构想和计划 要考虑样式而不是考虑具
阅读全文
摘要：CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 可以将某一个样式从一个元素切换到另一个元素。 假设您决定将上面的段落文本（而不是h1元素）设置成灰色
阅读全文
浙公网安备 33010602011771号