摘要:
在CSS3中,用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形,这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用,就会产生不同的效果,使用顺序不同,产生的效果是不一样的。 阅读全文
摘要:
Animations功能与Transitions功能相同,都是通过改变元素的属性值来实现动画效果,不同之处是:Transitions功能只能通过改变指定属性的开始值与结束值,然后再这两个属性值之间进行平滑的过渡来实现动画效果。所以Transitions功能不能实现比较复杂的动画效果;Animations功能可以定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。 阅读全文
摘要:
在页面里加入些动画,可以是页面更加生动活泼,使用CSS3的动画功能,可以使页面上的文字或图像具有动画功能。比如说背景色从一种颜色,平滑的过度到另一种颜色。CSS3中的动画功能有两种,Transitions和Animations。这两种功能都可以通过改变CSS中的属性值来产生动画效果。本文简单介绍一下Transitions功能的使用方法。 阅读全文
摘要:
最近上网上找了些关于CSS实现垂直居中的方法,方法挺多,下面就我看到的几种好方法在这里说明一下,使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效,因此,到底选择哪种方法好,还要看具体情况。 阅读全文
摘要:
语法:text-overflow : clip | ellipsis取值:clip: 不显示省略标记(...),而是简单的裁切。 ellipsis: 当对象内文本溢出时显示省略标记(...) 说明:设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。对应的脚本特性为textOverflow。 text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。 兼容 阅读全文
摘要:
语法:background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]相关属性: background-image | background-origin | background-clip | background-repeat | background-size | background-position取值:<background-image>: 指定或检索对象的背 阅读全文
摘要:
语法:text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*相关属性 : 无取值:<color> :指定颜色。<length> :由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。<opacity> :由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位 阅读全文
摘要:
语法:box-shadow:<length> <length> <length> <length> || <color>取值:<length> <length> <length>? <length>? || <color>: 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色说明:设置块阴影box-shadow这个属性应用的非常普遍,可以使你的元素立刻变得漂亮起来,只是记得不要把值设得太离谱。box-shadow的四个参数:x-offset x轴 阅读全文
摘要:
语法: border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , 阅读全文
摘要:
1.为body标签赋予id: 同一个网站的不同页面,虽然HTML代码相同,但是可以通过CSS来取得不同的表现效果。如果这些页面用的是同一个CSS文件,怎样精确的定义相同内容的不同表现呢?通过给body标签赋予id以区别不同的页面,然后使用CSS后代选择器可以精确的选择目标。例如:首页的body赋予id="home", 内页的body赋予id="inner",如果选取首页文章标题的话,可以用:“#home #main h1”,而要选取内页中的标题的话就可以用:“#inner #main h1”。这样的话,同一个网站中不容的页面,HTML代码相同的也可以有同的表现效果了。2.相对长度em与段落首 阅读全文