css3被拆分成如下的小模块，选择器，盒模型，背景和边框，文字特效，2D/3D转换，动画，多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换，兼容浏览器加前缀 –webkit- -moz- 使用rotate()方法，让元素旋转一定的角度，参数：角度例如：transform:rotate(30deg); deg是角度的单位 使用translate()方法，让元素位移，参数：x轴 ，y轴例如：transform:translate(10px,10px); 使用scale()方法，改变元素的比例大小，参...
圆角效果： border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 阴影： box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式(inset)]; 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果...
此处只是记录，解析可见原文：http://www.cnblogs.com/skyblue-li/p/6092799.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>旋转图片</title><style>* {padding: 0px;margin: 0px;}/*这是为了消除默认dom元素的内外边距，使得我们写css的时候更精确*/body {background: #000;}#photos {width: 110px;/*宽度*/height: 180px;/...
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了CSS3过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。 使用方法很简单：下载HOVER.CSS 下载地址https://github.com/IanLunn/HoverDownload/InstallNPM: npm install --save hover.cssBower: bower i...
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)： 首先是box-shados语法,用于向框添加一个或多个阴影：box-shadow: h-shadowv-shadowblurspreadcolor inset;值描述h-shadow必须。水平阴影的位置v-shadow必须。垂直阴影的位置blur可选。模糊距离spread可...
ylbtech-CSS3：CSS 听觉参考手册 1.返回顶部1、听觉样式表听觉样式表可把语音合成与音响效果相组合，使用户可以听到信息，而无需进行阅读。听觉呈现可用于：视觉能力低弱的人士帮助用户学习阅读帮助有阅读障碍的用户家庭娱乐在汽车中使用听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。听觉样式表的一个例子：h1, h2, h3, h4 { voice-family: male; richness: 80; cue-before: url("be...
一、前言兼目录索引《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范，各类清规戒律谨记与严守。但是，后来呢，花姑娘送到跟前，什么戒律都成了浮云，禁不住诱惑享乐去了。啊，我现在似乎有类似的感觉，本来不打算深究CSS3的一些属性的，但是其效果以及实际应用价值之诱惑实在巨大，还是抵挡不住，折腾下了这篇文章。劳民伤财的工程越少越好，所以，这里干脆把CSS3 动画相关的几个属性凑合到一起了，这样，至少一年...
NoticeUI CSS3提示样式NoticeUI CSS3提示样式，css样式， js代码，提示样式。原文：http://www.cnblogs.com/lhrs/p/4169608.html
CSS3模块化结构CSS历史发展CSS（Cascading Style Sheet），层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS3属性选择器E[attr=val]表示具有属性att且其值等于valE[attr*=val]表示具有属性attr且其值中包含valE[attr^=val]表示具有属性attr且其值以val开头E[attr$=val]表示具有属性attr且其值以val结尾事实上除了以上四个之外还有俩用的相对比较少的属性选择器，那就是E[attr|=val]用来选择具有...
打算好好写博客开始，就想把博客给装修下，近几个月一直处在准备找工作疯狂学习前端的状态。感觉博客装修要等到工作稳定下来才有时间和经历去想想要搞成什么样的了。也看过一些博主的博客导航有这种样式的，趁着回顾CSS动画知识点，写了这个小例子。挺综合的，用到了很多过渡、变换和动画。Git源码https://github.com/adagiomin/CSS效果原文：https://www.cnblogs.com/L-xmin/p/13463954.html
1.什么是calc()? calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。2.calc()能做什么？ calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% +...
之前，我们想要实现一个完美的宽度自适应的输入框好麻烦，曾经也被作为对前端技术的一个挑战。类似的常见场景还有100%宽+边框的容器等。遇到这些情况，我们不得不分外小心，因为各个浏览器的表现可能不一致。现在，firefox和webkit相继支持calc()功能了，我们也可以学习下了。calc()是干嘛的？calc()是单词calculate(计算)的缩写，是css3的一个新的长度单位功能，可以使用简单的数学运算。嗯，CSS3越来越高级了。运算规则calc()使用...
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){background-color:red;} </style> ...... <div ><h2>1</h2><div>2</div><div>3</div><div>4</div><div>5</div> </div><!-- 第2个子元素div匹配 --> 2、E:first-child：匹配元素类型为E且是父元素的第一个子元素3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素4、E > F E元素下面第一层子集5、E...
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：1 background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ 2 background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */ 3 background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */ 4 background...
时间：2014-02-25来源：网络作者：未知编辑：RGBdisplay:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。一、box-flex属性box-flex主要让子容器针对父容器的...