在线演示 本地下载原文: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...