CSS3 - 技术教程文章
使用Selectivizr让你的 CSS3选择器 通吃IE6/7/8
作者：文刀日月使用Selectivizr让你的 CSS3选择器 通吃IE6/7/8Selectivizr是一个JS文件，你只需要引入如JQuery、Mootools、Prototype等N多流行的JS框架中的任意一个，然后再调用Selectivizr，就可以让IE6/7/8支持CSS3选择器。12345<!--[if (gte IE 6)&(lte IE 8)]> <script src="http://code.jquery.com/jquery.min.js"></script> <script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js"></script > <script src="...
css3学习总结9--CSS3过渡【代码】
CSS3 过渡通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡属性属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS 属性的名称。3transition-duration定义过渡效果花费的时间。默认是 0。3transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3transition-delay规定过渡效果何时开...
js 模拟css3 动画1【代码】
<html> <head> <title> javaScript缓动入门 </title> </head> <body> <style type=text/css>#taxiway {background: #e8e8ff; width: 800px; height: 100px}#move {background: #a9ea00; width:100px; height:98px; border:1px solid red} </style> <div id="taxiway"><div id="move" style="position: absolute; left: 0" onClick="start()"></div> </div> <p class=notice display="text-align:center">点击可移动绿色方块</p> <...
css3圆角矩形【代码】【图】
div{width: 200px;height: 200px;border: #f00 solid 1px;margin-bottom: 10px;} 1、设置 border-radius: 20px; div:first-of-type{border-radius: 20px;} 原文：https://www.cnblogs.com/qingyang-0-0/p/9395171.html
CSS3实现基本图形【代码】
http://blog.csdn.net/laokdidiao/article/details/51189476代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3实现基本图形</title><style> #Circle{ width:100px; height:100px; float: left; background: #6fee1d; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;} #Oval { width: 200px; height: 100px; float: left; background: #e9880c; -webkit-border-rad...
一款纯css3实现的颜色渐变按钮【代码】
之前为大家分享了推荐10款纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图：在线预览 源码下载实现的代码。html代码：<div class="container"><a target="_blank" class="btn green" href="http://www.w2bc.com/"><span>Nominate Yourself</span></a><a target="_blank" class="btn orange" href="http://www.w2bc.com...
CSS3+HTML5特效1 - 上下滑动效果【代码】【图】
先看看效果，把鼠标移上去看看。backfront 1. 本实例需要以下元素： a. 外容器 box b. 内容器 border c. 默认显示内容 front d. 滑动内容 back2. 外容器BOX的Height为200px，Width为200px；1.box1{ 2 position: relative; 3 top: 100px; 4 left: 100px; 5 width: 200px; 6 height: 200px; 7 border: 1px solid #ccc; 8 overflow: hidden; 9 }3. 内容器BORDER的Height为200%，Width为100%，Top为-100%； 1.bord...
CSS3 object-fit 属性【代码】
做项目经常会遇到图片列表展示，图片一般是用户从后台上传的，上传的图片尺寸千差万别。如果前端不控制图片大小，整个排版就会很乱，如果给定长宽，图片又会变形，用背景图片来处理有特别麻烦。这个问题一直苦恼了我好久，最近终于找到解决办法了。css有一个object-fit属性，用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框，效果类似于微信小程序里image标签的mode属性。1.首先是一个html结构，然后给定图片高宽...
CSS3 选择器
纪念一次惋惜的面试经历，明明知道但是保守的没有全说出来。。。first face _shp欣 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <...
CSS3实现投影效果【代码】
Webkit引擎定义了-webkit-box-reflect属性，该属性能够实现投影效果，具体语法如下：-webkit-box-reflect: <direction> <offset> <mask-box-image>属性取值说明如下：<direction>：定义反射方向，取指包括above、below、left和right。<offset>：定义反射偏移的距离，取指包括数值或者百分比，其中百分比是根据对象的尺寸进行确定，如果省略该参数值，则默认为0。<mask-box-image>：定义遮罩图像，该图像将覆盖投影区域。如果省略该...
CSS3
frameset 框架 分为水平框架 垂直框架 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。transition 过渡transition-pro...
《CSS3实战》笔记--溢出文本省略：text-overflow和文本换行显示：word-wrop【代码】【图】
通过阅读和学习书籍《CSS3实战》总结 《CSS3实战》/成林著.—北京机械工业出版社2011.5语法：text-overflow：clip | ellipsis | ellipsis-word取值简单说明：clip属性值表示不显示标记，而是简单的裁切。ellipsis属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。ellipsis-word属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个词（word）。?实际上，text-shadow属性仅用于决...
CSS3 （一）
text-shadow属性:文本阴影 text-shadow: 5px 5px 5px #FF0000; 向右5像素 向下5像素 模糊程度5像素 红色#s1 {font-size:40px; font-family:微软雅黑; -webkit-transition:1s all ease; text-shadow:0 0 0 black,0 0 0 black,0 0 0 black;}#s1:hover {text-shadow:0 0 10px black,0 0 10px black,0 0 10px black;} -webkit-linear-gradien属性：文本线性渐变 -webkit-linear-gradien( 30deg, rgba(255,0,0,0.8) 0%, rgba(0,255...
精选12个时尚的 CSS3 效果【附源码下载】【图】
这里是精选的12个很炫的 CSS3 效果。CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的 JavaScript 代码才能实现的效果，如今只需要简单的写几句 CSS3 代码就能实现。超炫的 CSS3 页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。源码下载...
HTML-HTML5+CSS3权威指南阅读（五、深入理解viewport）
1.手机浏览器与桌面浏览器的不同现在手机浏览器的显示分辨率与桌面浏览器差不多，但是手机的尺寸比电脑要小很多。一个没做过响应式处理的网站，在手机和电脑上显示完全一样的内容， 不可避免的会出现字体被缩小的现象。想象一下电脑里12号字体缩小好几倍的效果吧。 所以如果将web网页移植为wap应用上，还是有许多问题需要考虑。2.理解两个viewport的概念做过wap开发的都知道 html的 <meta name=”viewport”> ,这是一个从iphone引入...
css3新属性transform 3D的基础笔记.【代码】【图】
研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子:<style>#box{-webkit-perspective:800px;//定义3D场景大小-webkit-transform-origin:50% 50%;//定义3D场景的中心点perspective:800px;transform-origin:50% 50%;}.box{width:200px;height:20...
CSS3实现加载中的动画效果【代码】【图】
本篇文章由：http://xinpure.com/css3-implementations-of-loading-an-animation-effect/Loading 的菊花图形组合的不太好，基本上实现这个功能了动画解析这个动画用到的 CSS3 特性:transform 主要使用 transform 属性的 rotate，将线条组合成 Loading 图形 (也就是常见的菊花图形)animation 实现将线条颜色由浅到深，再由深到浅来回变换的动画，通过 animation-delay 属性来使颜色的变换产生过渡的效果，从而达到类似于 Loading ...
css书写顺序 1显示属性2.自身属性3.文本属性4.css3属性
(一)网页内容类标题: title摘要: summary箭头： arrow商标： label网站标志： logo转角/圆角： corner横幅广告： banner子菜单： subMenu搜索： search搜索框： searchBox登录： login登录条：loginbar工具条： toolbar下拉： drop标签页： tab当前的： current列表： list滚动： scroll服务： service提示信息： msg热点：hot新闻： news小技巧： tips下载： download栏目标题： title热点： hot加入： joinus注册： regsiter指南...
CSS3中的伪类概览,很实用的
CSS的目标，或者说是革命纲领就是：“将样式与内容分离”，这个目标能否实现，很大程度上依赖于CSS访问内容的能力。在CSS3中，这个任务得到了有力支持，强大的结构伪类Structural pseudo-classes出现了。提供了非常丰富的查询方式，让CSS选择器变得如此和蔼可亲了。让我们来快速概览一下，同时期待着浏览器整体换代的来到，毕竟只有最新的浏览器才支持CSS3选择器及其他特性。 支持浏览器：Firefox 3.1+, IE8+ (only in IE8 stand...
[Link]用HTML5/CSS3/JS开发Android/IOS应用
http://www.cnblogs.com/milkmap/archive/2012/02/09/2343880.htmlionicframework.com原文：http://www.cnblogs.com/Athrun/p/4683429.html
MiracleSnow网页设计HTML5+CSS3+JS全套视频教程
终于把这套课程讲完了，虽然时间隔了很长，但也算有始有终了，这是在YY讲课中我自己录的，讲了网页设计的基础，这也是我第一次给那么多人讲课，讲的不好多多包涵。前几次视频和课件是分开的，后几次都打包在一起了，由于第三章是教使用Dreamweaver，而我建议开始学的时候使用文本编辑器，因此就没讲这章，等学完基础，相信你们能够自己摸索Dreamweaver的使用。视频：第一、二章网页设计语言基础(1)：http://yun.baidu.com/s/1sjz2V...
css3 中的2D转换【代码】【图】
一、CSS3转换 通过转换实现对对元素进行旋转、缩放、移动、拉伸的效果；这种原来必须要通过JS或者图片处理才可以实现的效果，现在都可以通过CSS3来完成。 2D转换采用transform属性来实现效果。二、transform属性的取值rotate()函数 是可以进行旋转的函数scale()函数 可以进行缩放的函数三、函数的用法transform:rotate( deg);旋转将transform属性的取值设置为rotate函数，在括号里的是旋转的角度，其单位是deg（degree程...
css3圆角细节
/*1.设置一个值：四个角的圆角值都一样*/ /*border-radius: 10px;*/ /*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/ /*border-radius: 10px 30px;*/ /*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/ /*border-radius: 10px 40px 60px;*/ /*4.设置四个值：左上 右上 右下 左下*/ /*border-radius:...
纯CSS3+DIV实现小三角形边框【代码】【图】
html代码是这样的 <div class="arrow-up"><!--向上的三角--> </div> <div class="arrow-down"><!--向下的三角--> </div> <div class="arrow-left"><!--向左的三角--> </div> <div class="arrow-right"><!--向右的三角--> </div>下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up {width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:30px solid #fff; }/*...
[HTML] CSS3 边框【代码】【图】
CSS3 边框用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-image浏览器支持Internet Explorer 9+ 支持 border-radius 和 box-shadow.Firefox, Chrome, 和 Safari 支持所有最新的 border 属性.注意： 前缀是-webkit-的Safari支持阴影边框。前缀是-o-的Opera支持边框图像。CSS3 圆角在CSS2中添加圆角棘手。我们不得不在每...
介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer（附其他前端开发插件）【代码】【图】
正文自动给CSS文件添加不同浏览器的CSS3前缀：Autoprefixer安装只需兼容主流浏览器正常情况使用：（在书写完的CSS样式文件中，按F1，选择Autoprefixer CSS）这时候会添加最新需要兼容的css头（PS：现在基本上只考虑Safari和Chrome了）兼容其他浏览器但是，这往往不是我们需要的，有时候还需要兼容Firefox、Opera和IE，那么可以自定义VSCode的配置项：// autoprefixer配置"autoprefixer.browsers": ["ie >= 6", "firefox >= 8","chr...
CSS3时尚Tabs选项卡流线型标签效果【图】
这是一款效果非常时尚的Tabs选项卡标签的流线型线条效果。该效果使用纯CSS3来制作，效果类似eclipse软件的标签页效果。该Tabs标签使用流线型设计，并且可以自定义标签的颜色，非常实用和好看。效果演示：http://www.htmleaf.com/Demo/201504041626.html下载地址：http://www.htmleaf.com/css3/daohangcaidan/201504041625.html原文：http://blog.csdn.net/souhugirl/article/details/44887103
CSS3基础03（3D②） 求粉丝【代码】【图】
3 D（3.1）rotateY围绕着Y轴进行旋转（1）正数是(站在右边推)，负数是(站在左边推)（2.1）定义元素背过去是否可见backface-visibility: visible|hidden; 说明：visible表示可见，hidden表示不可见测试贝塞尔曲线的网址：http://xuanfengge.com/easeing/ceaser/（1）translateZ就是在Z轴上来回移动，但是如果没有透视的情况下，完全看不出效果，所以，一般transform：translateZ（）都是配合透视一起使用小经验：translateZ和rotate...
浅谈 css3 box盒子模型以及box-flex的使用【代码】
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 一、使用以及介绍：1、要实现水平或者垂直切分，必须先满足以下要求 i. display : box必须用在对应的父窗口，比如div.parent>div.panel*3 这种格局， parent 必须先先定义此属性 ii. .panel的元素定义box-flex，来实现按比例切分。如下图：就是将三个div水...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b...