为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
十天精通CSS3_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • img.bg {是有问题的 调整一下 要不只有一半一半的感觉卡了一下
    查看全部
  • background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
    查看全部
  • 文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。 比如,我们可以用下面代码实现设置阴影效果。
    查看全部
  • 嵌入字体@font-face: @font-face能够加载服务器端的文字,让浏览器可以显示用户电脑里没有安装的字体 语法:在css中设定 @font-face{ font-family:字体名称 src:字体文件在服务器上的相对或绝对路径 } 设置好以后就可以像使用普通字体一样了,只是要在使用出加上font-family:“字体名称”; 如p{ font-size:20px; font-family:“字体名称”; }
    查看全部
  • 线性渐变: linear-gradient(1,2,3) 1为渐变方向参数: to top 从下向上 to right 从左向右 to bottom to left to top left 右下角到左上角 to top right 2,3表示颜色的起始点和结束点,可以有多个颜色值 如background-image:linear-gradient(to left,red,orange,yellow,green,blue);
    查看全部
  • 颜色之RGBA RGBA是在红、绿、蓝的基础上增加了控制alpha透明度的参数 语法: color:rgba(R,G,B,A) R/G/B三个参数正整数值的取值范围为0-255(百分数值并非所有浏览器都支持) A为透明度参数,取值为0-1, 白色的RGB值为255,255,255
    查看全部
  • 为边框应用图片: 可以理解为一个切片工具,会自动把用作边框的图片切割 border-image:url(图片地址) 切割图片的宽度 图片延伸方式 切割图片宽度不超过border的宽度,如果四边宽度值相同只写一个值就行,如果不同按照顺时针顺序赋值。 图片延伸方式: repeat:居中开始一直重复,超出部分剪裁掉 round:圆满地铺满,会拉伸或压缩 stretch:有多长拉多长 webkit浏览器对于round属性和repeat属性似乎没有区分,显示效果是一样的。
    查看全部
  • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。 .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
    查看全部
  • border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
    查看全部
  • CSS属性选择器: E[att^="val"] 选择匹配元素E,且E元素定义了属性att,其属性值以val开头的任何字符串。 E[att$="val"] 选择匹配元素E,且E元素定义了属性att,其属性值以val结尾的任何字符串。 E[att*="val"] 选择匹配元素E,且E元素定义了属性att,其属性值包含val的任何字符串。
    查看全部
  • 设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。其四个属性值对应效果如下: 属性值 效果 none 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧 --- 时,动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果 在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
    查看全部
  • 设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。 参数 其主要有两个值running和paused。 其中running是其默认值主要作用就是类似于音乐播放器一样可以通过paused将正在播放的动画停下来也可以通过running将暂停的动画重新播放这里的重新播放不一定是从元素动画的开始播放而是从暂停的那个位置开始播放。另外如果暂停了动画的播放元素的样式将回到最原始设置状态。 例如页面加载时动画不播放。代码如下 animation-play-state:paused;
    查看全部
  • 设置动画播放方向 animation-direction属性主要用来设置动画播放方向,其语法规则如下: animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值:normal、alternate 1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放; 2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。 例如:通过animation-direction属性,将move动画播放动画方向设置为alternate,代码为: animation-direction:alternate; 注意:Chrome或Safari浏览器,需要加入-webkit-前缀!
    查看全部
  • 设置动画播放次数 animation-iteration-count属性主要用来定义动画的播放次数。 语法规则: animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数,但也可以使用带有小数的数字,其默认值为1,这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite,动画将会无限次的播放。
    查看全部

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!