![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
iteye_2245
这个作者很懒,什么都没留下…
展开
-
animation-fill-mode
animation-fill-mode 动画时间外的状态 none 默认值,不设置forwards 结束后返回动画结束的状态backwards 结束后返回动画开始的状态both 扩展阅读: http://css.doy...原创 2013-04-15 18:30:53 · 178 阅读 · 0 评论 -
采用:target来实现锚点的动画
本代码片段来自gruntjs的官方文档: 比如: http://gruntjs.com/configuring-tasks#files <a class="anchor" href="#files" name="files">Files</a> @keyframes 'blink'{ 0%{opacity:1.0}...原创 2014-01-19 19:55:40 · 337 阅读 · 0 评论 -
css3设置滚动条
本文简单记录一下webkit下美化滚动条的一些方式: 下面这张图比较直观,来源于互联网,不追源了,感谢原作者。 ::-webkit-scrollbar 滚动条整体部分,一般可以设置宽度 2. ::-webkit-scrollbar-button 两端的按钮 3. ::-webkit-scrollbar-t...原创 2012-12-06 20:18:32 · 402 阅读 · 0 评论 -
css3之box-reflect(倒影)
本文探究一下css3的box-reflect来实现所谓的倒影效果: 1、语法: box-reflect:none|<direction><offset>?<mask-box-image>? direction有如下几个值:above 倒影在元素的上边below 倒影在元素的下边left 倒影在元...原创 2012-11-18 21:43:43 · 258 阅读 · 0 评论 -
css3的@font-face
本文是css3的@font-face的探究: 1、语法: @font-face:{属性:取值} 取值: font-family 设置文本的字体名称font-style 设置文本样式font-variant 设置文本是否大小写font-weight 设置文本的粗细font-stretch 设置文本是否横向的拉伸变形font-...原创 2012-11-13 21:30:36 · 81 阅读 · 0 评论 -
判断支持pointer-events
本代码片段来自Modernizr function test(){ var elem = document.createElement('x'); elem.style.cssText = 'pointer-events:auto'; return elem.style.pointerEvents === 'auto';} ...原创 2013-11-09 16:27:36 · 298 阅读 · 0 评论 -
css之initial
本文来自:https://developer.mozilla.org/en-US/docs/Web/CSS/initial https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value原创 2013-11-02 21:04:20 · 206 阅读 · 0 评论 -
css3之mask
-webkit-mask-box-image 实例代码: .mask{ -webkit-mask-box-image:url(../mask.png)} url 遮盖图片地址stretch 延伸距离-webkit-grad...2012-10-29 16:52:37 · 91 阅读 · 0 评论 -
css3应用之黑白图片处理
其实在前面的一篇介绍-webkit-filter的文章中简单地提了一下。 我们可以设置灰度来对图片进行处理。 .test{ -webkit-filter:grayscale(100%);} IE下面我们可以设置 filter:gray 扩展阅读: http://www.zhangxinxu.co...原创 2012-10-01 14:43:06 · 165 阅读 · 0 评论 -
你认识-webkit-filter吗
前言: 其实这个topic的谈起,还是某某大侠基于webkit做一个特效的时候讨论到的,可能部分同学没有遇到过,简单说说吧。 正文: 其实说起这个就先说说一个规范吧,Filter Effects 1.0 规范的37点提了几种可能的值: drop-shadow 阴影 参数:<shadow...2012-09-29 15:52:05 · 140 阅读 · 0 评论 -
css3伪类之UI元素状态相关
UI元素状态相关的介绍3个 1、:checked --------- 用于单选或者多选按钮选中状态的样式规则设置 input[type=checkbox]:checked{width:20px;} 2、:disabled --------- 置灰状态下的样式规则设置 input:disabled{border-c...2012-09-28 20:40:59 · 77 阅读 · 0 评论 -
css3伪类:empty
介绍一下css3伪类之:empty ------------------------ 匹配没有子元素和内容的元素。 注释:连空格也不能有! #test:empty{width:100px;} 应用场景: 可以给一些空节点隐藏用!...2012-09-28 19:43:43 · 243 阅读 · 0 评论 -
css3 keyframes动画生成工具
本文收录一个css3 keyframes动画生成工具: http://cssanimate.com/原创 2014-01-19 20:46:36 · 424 阅读 · 0 评论 -
盒模型box-align
box-align: 受box-orient影响 规定子元素的对其方式 start 子元素都在顶部放置end 子元素都在底部放置center 子元素在中间线上baseline 子元素都在基线stretch 拉升子元素填充包含块 【子元素自适应父元素尺寸,默认值】 ...原创 2014-03-12 20:27:55 · 78 阅读 · 0 评论 -
css3 animation
css3 animation animation-name 动画的名称,默认none animation-duration 动画播放持续的时间,单位秒,默认0 animation-timing-function 还是ease,ease-in,ease-out这些 ...原创 2013-04-11 13:18:36 · 147 阅读 · 0 评论 -
css3案例之---采用rgba实现背景透明内容不透明
前言: 部分内容来自doy的博客:《CSS3 RGBA不是简单的RGB与opacity相加》,感谢作者! 个人做积累学习用 正文: 前面我也有一篇简单整理过rgba,如果不熟悉的可以看看那个。 我们来看下面这个例子: <div id="up-wrap"> 我是上面这层的文字...原创 2013-03-28 17:44:28 · 302 阅读 · 0 评论 -
css3之transition
transition有以下4个属性: transition-propertytransition-durationtransition-timing-functiontransition-delay 兼容性: http://caniuse.com/#search=transition ...原创 2013-03-13 14:08:41 · 93 阅读 · 0 评论 -
css3之transition-delay
transition-delay ---------- 变化延迟的时间 //默认是0,秒s为单位transition-delay:<time>[,<time>]原创 2013-03-13 14:06:44 · 144 阅读 · 0 评论 -
css3 弹性盒模型 box-orient
box-orient ----------------- 设置子元素的排列方式,水平或者垂直 默认值: horizontal ---------- 子元素为水平排列,从左到右vertical ---------- 子元素为纵向排列,从上到下inline-axisblock-axi...原创 2013-02-01 10:22:31 · 97 阅读 · 0 评论 -
css3 弹性盒模型 box-pack
box-pack 受box-orient影响 ----------- 设置子元素的对齐方式 取值: start 默认值,子元素从开始位置对齐center 子元素居中对齐end 子元素从结束位置对齐justify ...原创 2013-02-01 10:22:19 · 167 阅读 · 0 评论 -
css3 弹性盒模型 box-flex
box-flex ------------- 设置子元素如何分配剩余父元素的空间 取值: number 默认是0原创 2013-02-01 10:22:02 · 127 阅读 · 0 评论 -
css3的media-queries
前言: 本文主要简单收录一下media-queries相关的知识! ------------ 本文内容部分来自互联网,感谢原作者,做个人学习用! 正文: <link rel="stylesheet" media="screen and (max-width: 600px)" href="small_600.css" /> --------...原创 2013-01-29 12:08:04 · 88 阅读 · 0 评论 -
css3之transition-property
transition-property ---------- 要变化的属性 一个可变属性的列表:http://www.w3.org/TR/css3-transitions/ 《7.1. Properties from CSS》 可以设置一个“all”,表示所有的属性...原创 2013-01-25 11:06:48 · 94 阅读 · 0 评论 -
css3之transition-timing-function
transition-timing-function 取值: ease 等同贝塞尔曲线(0.25,0.1,0.25,1.0) 逐渐慢下来linear 等同贝塞尔曲线(0.0,0.0,1.0,1.0) 线性过度ease-in 等同...原创 2013-01-24 16:09:26 · 179 阅读 · 0 评论 -
盒模型box-direction
box-direction: 子元素按照什么方向来排列 normal 默认reverse 反方向显示子元素inherit http://ued.ctrip.com/blog/wp-content/webkitcss/prop/box-direction.html ...原创 2014-03-12 20:58:49 · 110 阅读 · 0 评论 -
谈谈ie9对css3的支持情况
本文记录一下ie9支持的css3相关的。 css3属性: 1、 支持的: border-radiusbox-shadowbox-sizingoverflow-xoverflow-yword-wrapopacity 2、不支持的:text-shadowborder-imagetransformstex...原创 2012-09-28 19:19:42 · 292 阅读 · 0 评论 -
css3的多背景图片
举例: div.test { background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif); background-repeat: repeat-y; background-position: top left, top right; width:...2012-09-17 16:38:46 · 101 阅读 · 0 评论 -
css3伪类:not
http://www.w3.org/TR/css3-selectors/ css3伪类:not 语法: //an E element that does not match simple selector sE:not(s) 代码示例: //input里面排除掉buttoninput...原创 2013-05-22 10:28:26 · 406 阅读 · 0 评论 -
让IE部分支持css3属性
这个老外写的htc文件可以帮助我们在IE下模拟css3中的border-radius|box-shadow|text-shadow 1、但是有一些不支持的情况 border-radius: 只设置一个角落的圆角属性的时候不生效box-shadow: 不支持除了黑色(#000)以外的其他颜色text-sh...2012-02-27 14:38:57 · 81 阅读 · 0 评论 -
让IE支持border-radius
很多时候我们需要在IE下支持一些圆角,但是又懒得去用复杂的css代码去各种拼接的话,有下面两种方面: 方案一: 我们可以采用这个htc的文件。 代码: .test{ -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; ...2012-02-27 14:19:30 · 100 阅读 · 0 评论 -
css3之transform-origin
CSS3之 transform-origin -----------------变形原点,该元素围绕着哪个点变形或者旋转,配合着transform属性一起用。 1、语法: transform-origin: x-axis y-axis z-axis; 2、取值: 默认值为 50% 50% 0 3、兼容性: ...2012-02-20 15:47:59 · 136 阅读 · 0 评论 -
css3动画属性系列之transform细讲移动translate
上一篇讲了rotate,这一次我们再细讲一下translate 下面我们从3个方面开始介绍: 1、translate(x,y) 水平方向和垂直方向同时移动, 取值x表示x轴过渡值 取值y表示y轴过渡值 ----如果没有赋值,默认是0 默认以元素的中心点为基点,可以通过transform-origin进行基点的设置 x,y如果为负就反方向移动tr...2012-02-20 14:37:59 · 1453 阅读 · 0 评论 -
css3动画属性系列之transform细讲旋转rotate
1、语法: transform: none | <transform-function> [<transform-function>]* 2、取值: none ----不进行变化<transform-function> ----一个或多个变...2012-02-20 13:53:12 · 931 阅读 · 0 评论 -
css3之:nth-child伪类选择器
CSS3之:nth-child伪类选择器 :nth-child(number) -----匹配第number个元素,参数number必须大于0的整数举例:li:nth-child(5){color:green;} :nth-child(an) ------匹配所有倍数为a的元素。其中参数an中的字母n不能缺省。 :nth-...2012-02-16 10:56:56 · 130 阅读 · 0 评论 -
css之selection---让“选择”更色彩
一直以来很少人关注也门文字的选中文字的控制,但是不乏在一些细心的网站会加一些这样的设置。 CSS3新增的伪::selection,可以帮助我们来改变选择文本的颜色和背景。 ::selection{color:#333;background-color:#cca2da;}::-moz-selection{color:#333;background-color:#cca2d...2012-02-13 10:38:22 · 157 阅读 · 0 评论 -
css3之border-color
CSS3之border-color -----设置对象边框的颜色。 如果你设置了border的宽度为X px,那么这个border上使用X中颜色,每一种颜色显示1px的宽度。如果你定义的border的宽度为5px,但是你声明了4中颜色,那么最后一个颜色被添加到剩下的宽度中。 1、语法: border-color:<col...2012-02-12 17:46:28 · 95 阅读 · 0 评论 -
css3之outline-offset
CSS3之outline-offset -------可以用来调整外框与容器边框的距离。 语法: outline-offset:<length>|inherit 2. 取值:<length>:定义轮廓距离容器的值inherit:默认继承 3. 兼容性 (部...2012-02-06 10:11:22 · 113 阅读 · 0 评论 -
transition-duration
transition-duration : <time> [,<time>]-----------指定改变样式整个过程完成时间的秒数 time是对象过渡的持续时间,数值,单位是s 秒 比如: 0.1s 或者.1s多个值用逗号(,)进行分割脚本特性为transitionDuration默认是0 ,变化是即时的 浏览器支持...2011-10-24 12:50:35 · 186 阅读 · 0 评论 -
css3之border-radius
简单记录: 其实以前的做法多是通过切的底图作为div的背景去实现拼接后生成所谓的圆角效果。 但是随着css3出来以后再部分浏览器已经不需要在那么麻烦,出现冗余的div和css代码。 border-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-lef...2011-10-11 11:31:39 · 91 阅读 · 0 评论 -
css3之text-shadow
CSS3之 text-shadow ----设置文字是否有阴影及模糊效果。可以设定多组的效果,用逗号分隔。 1、语法: text-shadow: none | <length> none | [<shadow>,]*<shadow>或none |<color>[,color]* ...2012-02-27 15:49:21 · 87 阅读 · 0 评论