css3基本属性

CSS3 基本属性浅析（含选择器、背景阴影、3D转换、动画等）

1渐进增强原则 2私有前缀不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试: Chrome浏览器:-webkit-border-radius: 5px; 火狐浏览器:-moz- border-radius: 5px; IE浏览器:-ms-border-radius: 5px; 欧朋浏览器:-o-border-radius: 5px; 3选择器 ① 属性选择器 [href] { color: red }: 选取具有href属性的元素 [href^=…

一.css属性:1.层叠性:当出现相同的选择器时,属性冲突的时候,后面的属性会把前面的属性覆盖掉. 2.继承:当存在父子关系的时候,子元素会继承父元素的部分属性注意: a标签不会继承颜色:h标签不继承字体大小 3.优先级:当有多个选择器作用在同个元素上时,到底谁有效果? 优先级顺序:继承性 < 通配符 * < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ! important(影响的只是单一的属性) 4.权重计算:当有多个复合选择器作用在同一个元素…

css3 animate基本属性

Css3animate属性属性描述 Css Animation 所有动画属性的简写属性,除了animation-play-state属性 Animation:name duration timing-function delay iteration-count direction; 3 Animation-name 规定@keyframes动画的名称. animation-name:keyframename|none 3 Animation-duration 规定完成一个周期所花费的秒或毫秒…

CSS3制作动画的三个属性

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲继续第三个动画属性Animation的学习,单从Animation字面上的意思,我们就知道是“动画”的意思.但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl…

CSS3背景温故

1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachment(背景图片是固定还是滚动)background-position(背景图片位置)综合使用:background:[<background-color>][<background-image>][<background-repeat>][<background-a…

理解CSS3中的background－size(对响应性图片等比例缩放)

理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用background-size:400px 200px缩放设置固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto 固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置固定宽…

CSS3的新属性的一下总结

阮一峰:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混:animation,transition,transform这三个属性,今天就总结一下首先是:transform:和css3一些基本属性,例如:box-shadow.border-radius.background-position等等的这些属性是一个类型的,他可以做2D.3D,旋转.放大.缩小等的一些变化动画类: anima…

CSS3动画基本的转换和过渡

理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x,y);//平移,x代表向又移动距离,y代表向下移动距离: transform:scale(x,y);//缩放,x代表水平缩放倍数,y代表垂直缩放倍数: transform:rotate(x);//旋转,x代表顺时针旋转多少度,如rotate(10deg) : transform:skew(x,y)…

CSS3边框温故

1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px(2)border-color:设置元素边框的颜色,默认色就是字体颜色(3)border-style:设置元素边框的类型,默认[none]缩写语法:border:border-width border-style border-color;注:缩写后每个属性之间使用空格隔开,它们之间没有先后顺序 3.…

制作动画效果：《CSS3 Animation》

在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起来看看这个“Keyframes”是什么东西.前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执…

CSS3—CSS3和现代Web设计

1.1 现代Web设计理念 1.1.1 可访问性第一同样一段内容, 可以用成千上万的方法为其设计样式, 但全世界的用户应该依然可以访问它们, 不管他们用什么方式去访问Web——无论手机.键盘控制器还是屏幕阅读器. 因此关于锁定那些没有使用矫正光泽水准的设备的用户是很重要的. 1.1.2 可用性其次当用户访问网站中的内容和服务的时候, 他们能理解并且找到他们想要的信息吗? 为什么人们不多思考:对于浏览他们网站的用户来说, 什么信息是最有用的, 然后如何展现这些信息才能让用户更容易消化吸收? 一…

CSS3中的background－size(对响应性图片等比例缩放)

background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度): 100%,height(高度):100%; 但是设置图…

CSS3条件判断——@supports/window.CSS.supports()（转）

CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包含了两个部分,其一是"@media"规则,主要用来"根据媒体属性区分样式表"(特别是在Responsive设计中,发挥的作用更是强大):其二是"@supports"规则,主要用来代替前面常用的Modernizr库,在不支持CSS3的浏览器下实现渐进增…

css3背景总结与解析

一.常用基本属性: background-color:transparent || <color> 常用颜色格式有:颜色名.rgb.hls.十六进制.rgba.hlsa. background-image:none || <url> url可以是相对地址,可以是绝对地址. background-repeat:repeat || repeat-x || repeat-y || no-repeat. background-attachment:scroll ||…

CSS3+HTML5特效4 - 横向无缝滚动

先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This is a test 1. 如果看完上一篇纵向滚动的朋友,就很容易理解横向滚动的实现方式了. 实现原理: 1. 利用CSS3的@keyframes规则创建动画效果: 2. 使用CSS3的animation效果完成滚动切换. @-webkit-keyframes scrollText2 { 0%{ -w…

CSS3+HTML5特效3 - 纵向无缝滚动

老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This is a test 1. 实现原理: 1. 利用CSS3的@keyframes规则创建动画效果: 2. 使用CSS3的animation效果完成滚动切换. CSS代码 @-webkit-keyframes scrollText1 { 0%{ -webkit-transform: trans…

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教…

关于css3中transform的理解（只是改变状态未改变其真正的属性）

众所周知,在css3中可以用animation实现动画效果,在这里用一个transform:translateX举例. <div class="div1"></div> .div1{ margin:0 auto; width: 100px; height: 100px; border:1px solid blue; -webkit-animation-name: move; -o-animation-name: move; animation-name: mov…

网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正

最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件,img文件这几个部分css文件,全名叫成叠样式表稍后会说说,js呢,这个文章暂时先不说现在说说网页静态网页htm,html 最早的静态网页文本,目前也常见非静态网页 asp 微软的动态网页文件php php的文档格式,参看www.php.net,常用,比asp流行jsp sun公司的动态网页文本,…