css3学习笔记 - 随笔分类 - gulan123

Css背景渐变

摘要：语法：background：linear-gradient( 渐变方向，起点颜色，终点颜色 )参数说明：渐变方向：可以使用top，left，或者指定具体的角度（deg为单位），比如top是自上而下渐变，left是自左向右渐变。同时也可将两者结合起来，比如top left表示自左上方向右下方渐变。起点阅读全文

posted @ 2016-09-07 16:00 gulan123 阅读(331) 评论(0) 推荐(0)

CSS生成内容

摘要：在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img 阅读全文

posted @ 2016-09-07 15:38 gulan123 阅读(181) 评论(0) 推荐(0)

CSS3外轮廓属性

摘要：外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起阅读全文

posted @ 2016-09-07 15:36 gulan123 阅读(418) 评论(0) 推荐(0)

自由缩放属性resize

摘要：为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率阅读全文

posted @ 2016-09-07 15:34 gulan123 阅读(193) 评论(0) 推荐(0)

Responsive设计——不同设备的分辨率设置

摘要：下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求： 1.1024px显屏 @media screen and (max-widt 阅读全文

posted @ 2016-09-07 15:24 gulan123 阅读(297) 评论(0) 推荐(0)

Media Queries使用方法

摘要：1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。 2.最小宽度min-width “min-width”与“max-wi 阅读全文

posted @ 2016-09-07 14:43 gulan123 阅读(231) 评论(0) 推荐(0)

跨列设置column-span

摘要：column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松阅读全文

posted @ 2016-09-05 17:53 gulan123 阅读(425) 评论(0) 推荐(0)

列表边框column-rule

摘要：column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则： column-rule:<column-rule-width>|<co 阅读全文

posted @ 2016-09-05 16:16 gulan123 阅读(256) 评论(0) 推荐(0)

列间距column-gap

摘要：column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> column-gap: normal || <length> 取值说明属性值属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font 阅读全文

posted @ 2016-09-05 12:01 gulan123 阅读(474) 评论(0) 推荐(0)

多列布局——column-count

摘要：column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer> 取值说明：属性值属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 阅读全文

posted @ 2016-09-05 11:59 gulan123 阅读(1125) 评论(0) 推荐(0)

多列布局——column-width

摘要：column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示； column-width: auto | <length> 取值说明属性值说明 auto 如果阅读全文

posted @ 2016-09-05 11:52 gulan123 阅读(485) 评论(0) 推荐(0)

多列布局——Columns

摘要：为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的阅读全文

posted @ 2016-09-05 11:51 gulan123 阅读(253) 评论(0) 推荐(0)

设置动画时间外属性

摘要：animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：属性值效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 for 阅读全文

posted @ 2016-08-30 11:26 gulan123 阅读(168) 评论(0) 推荐(0)

设置动画的播放状态

摘要：animation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新阅读全文

posted @ 2016-08-30 11:23 gulan123 阅读(168) 评论(0) 推荐(0)

设置动画播放方向

摘要：animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为n 阅读全文

posted @ 2016-08-30 11:19 gulan123 阅读(231) 评论(0) 推荐(0)

设置动画播放次数

摘要：animation-iteration-count属性主要用来定义动画的播放次数。语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1 阅读全文

posted @ 2016-08-30 11:16 gulan123 阅读(327) 评论(0) 推荐(0)

设置动画开始播放的时间

摘要：animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。语法规则： animation-delay:<time>[,<time>]* 案例演示：浏览器渲染样式之后2S之后触发m 阅读全文

posted @ 2016-08-30 11:15 gulan123 阅读(446) 评论(0) 推荐(0)

设置动画播放方式

摘要：animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。语法规则： animation-timing-function:ease | linear | ease-in | ease-out | ea 阅读全文

posted @ 2016-08-30 10:57 gulan123 阅读(243) 评论(0) 推荐(0)

设置动画播放时间

摘要：animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则 animation-duration: <time>[,<time>] 阅读全文

posted @ 2016-08-30 10:53 gulan123 阅读(374) 评论(0) 推荐(0)

调用动画

摘要：animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。语法： animation-name: none | I 阅读全文

posted @ 2016-08-30 10:49 gulan123 阅读(201) 评论(0) 推荐(0)

随笔分类 - css3学习笔记