在线演示 本地下载原文：https://www.cnblogs.com/datiangou/p/9986695.html
Flexbox模型的三个规范：1. 旧版本 2009年 display: box、inline-box2. 混合版本 2011年 display: flexbox、inline-flexbox3. 新版本 display: flex、inline-flex 当display属性为以上时，将为其后代创建FFC(Flex Formatting Context)。旧版本属性如下：1. box-orient 定义伸缩主轴的方向 horizontal | vertical | inline-axis (内联轴排列)| block-axis (块轴排列)2. box-directio...
在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果...
CSS3 边框：border-radius（倒圆角）box-shadow （盒子阴影）border-image （边界图片）CSS3 背景：background-size（属性规定背景图片的尺寸。）background-origin（属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域）CSS3 文本效果：text-shadow（可向文本应用阴影，可以设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色）word-wrap（word-wrap 属性允许您允许文本强制文本进行换...
1. 边框（圆角边框、加阴影和用图片绘制）新增加 border-radius box-shadow border-image.div1{ border:2px solid purple; border-radius: 25px; -moz-border-radius:25px;(火狐老版本) width:600px; height:300px; box-shadow:10px 10px 5px #888888; -webkit-border-image: url(border.png) 2 2 round;（chrome）}2.背景新增加 background-size background-origin background-clip.div1{ bord...
CSS3，html5：各种属性，有酷炫的效果兼容性问题：政府大多数政府机构都是用的IE6.7，所以很多时候要兼容IE6.7，IE连PNG格式都不支持margin：本身有兼容性问题，在其他地方可能有问题padding：内边距还好一些APP端只有一个兼容性问题，屏幕，要自适应屏幕两种方法：（腾讯的autoSize,js）（metaholder.js 连rem都可以不用，用px都可以）手机端只有屏幕兼容性问题，所以常用CSS3，html5CSS3扩展：浏览器有兼容性问题，有些可以在浏览...
-moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表safari、chromecontenteditable="true" 内容变的可编辑onpaste="return false" 表示不能粘贴,用于input或不能粘贴的div、span、p标签等onselectstart="return false" 不能复制文本内容-moz-user-select:none; 在火狐下面设置样式不能选择插入样式表的方法有三种: 1、外部样式表（.css文件引入...
实例动画step1：改变字体颜色<h1><a href="http://www.rainleaves.com">雨打浮萍</a></h1>h1 a{color:#03c;text-decoration:none;-webkit-transition:color .5s ease-in-out;-moz-transition:color .5s ease-in-out;-o-transition:color .5s ease-in-out;transition:color .5s ease-in-out;} h1 a:hover{color:#f60; }step2：改变背景颜色<h2>专注于web前端开发</h2>h2:hover{-webkit-transition:background-color 0.5s linear;-mo...
A． 使用选择器来插入内容h2:before{ content:"前缀";}h2:after{ content:"后缀";}B． 指定个别的元素不进行插入h2.sample:before{ content:none;}2. 插入图像A． 在标题前插入图像文件h2:before{ content:url(anwy.jpg);}B． 将alt属性的值作为图像的标题来显示（用不了）img:after{ content:attr(alt); display:block; text-align:center; margin-top:5px; font-size:11px; font-weight:bold; ...
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。 首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。 html： 复制代码代码如下:<div id="pyramid"> <div></div> </div> css： 复制代码代码如下:<style type="text/css"> #pyramid { position: relative; margin: 100px auto; height: 500px; width: 100px; } #pyramid > div { po...
text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; 原文：http://www.cnblogs.com/fumj/p/3522521.html
如何利用CSS3编写一个满屏的布局css3的出现能帮助我们更加轻松的实现各种想要的效果，例如写一个刚好满屏的布局，我们就可以利用CSS3的弹性盒模型来实现。先来贴出html布局代码： 1<%- include header %> 2<div class="wrapper"> 3<div id="appswall"> 4<div class="adsapp-title"><button class="goback">返回</button><h1>精品推荐</h1></div> 5<div id="adsApps"> 6<ul> 7<li class="loading"></li> 8</ul> 9</div>10</div>11</...
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>非常棒的CSS3立体效果</title> </head> <body> <div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div> <style> .list_case_left{position:absolute;left:10%;font-size:130px;font-weight:800;color:#fff;text-shadow:1px 0px #009807, 1px 2px #006705, 3px 1px #009807, 2px 3px #006705, 4px 2px ...
问题最近在使用background-image属性来实现CSS3的逐帧动画时，碰到了个问题。在chrome浏览器上，background-image属性是支持css3动画的，但是到了firefox上，就完全看不到任何动画。原因通过网上查找，才发现W3C标准中明确background-image属性是不支持动画的，所以firefox由于遵循了该标准，并没有给该属性支持动画。解决过程解决方法是使用backgrond-position属性，该属性在W3C标准中是支持动画的，因此所有浏览器应该是可以支持...
之前在园子里看到一个HTML5/CSS3的文字特效(这里)，觉得挺好玩的所以小小的研究了下，不过发现代码都是针对webkit以及FF的所以IE跪了。Runjs我将示例中的代码进行了精简，后来发现CSS大多数没有前缀，我很费解之后发现它引用过来一个PrefixFree，有了这个js就能不用写CSS3的前缀:)PrefixFree?<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>在link中，或是style中，或是dom元素的style中书写CSS...