CSS3
关注
分享
扫一扫
xiaochouyu0703
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css3新属性-圆角效果
border-radius是向元素添加圆角边框。 border-radius的值能用px单位，还可以用百分比或者em，但兼容性目前还不太好。/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ <body><div class="circle"></div><br/><!--任务部分--...原创 2014-12-24 15:56:10 · 231 阅读 · 0 评论 -
css3阴影效果
[b]元素阴影:[/b]语法:box-shadow: color inset|;水平偏移值(可正负) 垂直偏移值(可正负) 阴影模糊值 颜色 投影方式【inset内部阴影，省略参数为外部阴影方式。注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。】兼容性:ff3.5+,Chrome2.0+,safari4+兼容多种浏览器的添加阴影效果示例:[cod...原创 2014-04-10 18:12:38 · 106 阅读 · 0 评论 -
CSS3 图片投影
[b]box-reflect[/b] none:默认值，表示无倒影效果； :此值表示box-reflect生成倒影的方向，主要包括以下几个值： above:表示生成的倒影在对象（原图）的上方； below:表示生成的倒影在对象（原图）的下方； left:表示生成的倒影在对象(原图)的左侧； right:表示生成的倒影在对象(原图)...原创 2015-03-30 17:59:41 · 1098 阅读 · 0 评论 -
CSS3 Flexbox伸缩布局
伸缩布局盒模型（Flexible Box） 用来提供一个更加有效的方式制定、调整和分布一个容器里大小是未知或者动态的项目布局。优点：轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。[b]如何创建？[/b][code="css"].flexcontainer{ display: -web...原创 2015-03-30 12:00:27 · 158 阅读 · 0 评论 -
CSS3 新增伪类选择器
伪类选择器[b]:nth-child(n)选择器[/b] 用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的[color=red]起始值始终是1[/color]，而不是0!表达式的值为0或小于0的时候，不选择任何匹配的元素。[b]:nth-last...原创 2015-03-27 11:09:27 · 232 阅读 · 0 评论 -
CSS3新添加的::selection伪元素
[b]::selection伪元素[/b] 用来匹配突出显示的文本(用[color=blue][b]鼠标选择文本时的文本[/b][/color])。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。2、Firefox 支持替代的 ::-m...原创 2015-03-25 10:37:15 · 776 阅读 · 0 评论 -
css3自由缩放resize
resize属性主要是用来改变元素尺寸大小的，允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小，主要目的是增强用户体验。适用于：可以使用overflow属性的任何容器元素。resize: none | both | horizontal | vertical | inherit none用户不能拖动元素修改尺寸大小。both用户可以拖动元素，同时修改元素的宽度和...原创 2015-03-18 16:27:54 · 276 阅读 · 0 评论 -
CSS3 嵌入字体 @font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。[code="语法"]@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径;}[/code][code="java"]@font-face{ font-family: "MOOC Font";/...原创 2015-03-16 09:29:03 · 105 阅读 · 0 评论 -
css3动画--animation
一）Keyframes被称为关键帧，用来定义动画内容。语法：@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}二）[color=blue]animation-name[/color] 属性主要是用来调用 @keyframes 定义好的动画。...原创 2015-03-12 14:10:02 · 116 阅读 · 0 评论 -
css3变形之缩放 transform：scale
scale()函数 让元素根据中心原点对对象进行缩放。语法： 1、scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。2、scaleX(x)元素仅水平方向缩放（X轴缩放）3、scaleY(y)元素仅垂直方向缩放（Y轴缩放） scale()的取值默认的值为1，当值设置为0.01...原创 2015-03-12 11:36:41 · 1051 阅读 · 0 评论 -
css3动画--过渡属性 transition-property
可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡...原创 2015-03-12 11:11:51 · 513 阅读 · 0 评论 -
CSS3 Media Queries
[b]Media Queries媒体查询 功能：[color=red]在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。[/color][/b] CSS3中的Media Queries增加了更多的媒体查询，可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。 最常见的例子：同时给PC机的大屏幕和移动...原创 2015-03-12 10:36:34 · 87 阅读 · 0 评论 -
css3变形之位移 transform：translate
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）2、translate3d(x,y,z) 3d移动3、translateX(x)仅水平方向移动（X轴移动）4、translateY(Y)仅垂直方向移动（Y轴移动）5、translateY(Y) 仅Z轴方向移动（Z轴移动）[code="java"] 我向右向下移动[/code]...原创 2015-03-11 10:53:52 · 725 阅读 · 0 评论 -
css3变形之旋转 transform：rotate
rotate(angle) 定义 2D 旋转，在参数中规定角度。rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。rotateY(angle) 定义沿着 Y 轴的 3D 旋转。rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。[code="html"] 我不想旋转(^_^)[...原创 2015-03-11 10:33:45 · 323 阅读 · 0 评论 -
CSS3 text-overflow 文本溢出
text-overflow 属性规定当文本溢出包含元素时发生的事情。语法：text-overflow: clip|ellipsis|string;clip 修剪文本。 ellipsis 显示省略符号来代表被修剪的文本。注意：text-overflow：ellipsis;要与white-space:nowrap; 和overflow:hidden; 一起使...原创 2015-01-20 10:08:23 · 307 阅读 · 0 评论 -
css3多列布局美化属性
美化效果的属性：(一)[b]column-gap[/b]主要来设置列与列之间的间距： 语法：column-gap: normal || 1）默值为1em（如果你的字号是px，其默认值为你的font-size值）。 2）length的话，使用px,em单位的任何整数值，但不能是负值。(二)[b]column-span[/b] 跨列设置，定义一个分列元素中的子元素...原创 2015-01-12 17:12:59 · 206 阅读 · 0 评论 -
CSS3--多列布局模块
[b]多列布局模块（CSS Multi Column Layout Module）[/b]为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局。优势：不需要计算宽度，不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。还有一个，那就是清晰整洁的语义！语法：columns： || 用来定义多列中每列的宽度 用来定义多列中的列数大部分主流浏览器对其...原创 2015-01-12 14:53:26 · 300 阅读 · 0 评论 -
css3新特性-新增3个属性选择器
CSS3在CSS2的基础上对属性选择器进行了扩展,使得属性选择器有了通配符的概念。[img]http://dl2.iteye.com/upload/attachment/0105/0778/749cb6fa-06c4-3bc3-be3b-d8422f738eb9.png[/img][code="html"]a[class^="column"]{ backgro...原创 2015-01-09 10:30:21 · 284 阅读 · 0 评论 -
css3 背景属性新特性
以往通过图片修饰页面的途径，在css3中得到了改善，对页面性能也有了一定的提升。[size=medium][b]background-size设置背景图像大小[/b][/size]设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法：background-size: auto | | | cover | contain; c...原创 2014-04-11 11:17:38 · 192 阅读 · 0 评论