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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 线性渐变: 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
    查看全部
  • first-child 选取一个集合中的第一个元素,要求,该集合在父元素中必须有一个处于是父元素第一个子元素才有效 first-of-type 选取一个集合中的第一个元素,该元素只要满足是集合内的第一个元素即可,而非满足必须同时是父元素中的第一个子元素和集合中的第一个元素两个条件
    查看全部
  • 优先级:id选择器》伪类选择器》类选择器
    查看全部
  • :target 为点击才触发的选择器,未点击该属性无效
    查看全部
  • @表示定义?
    查看全部
  • 为边框应用图片: 可以理解为一个切片工具,会自动把用作边框的图片切割 border-image:url(图片地址) 切割图片的宽度 图片延伸方式 切割图片宽度不超过border的宽度,如果四边宽度值相同只写一个值就行,如果不同按照顺时针顺序赋值。 图片延伸方式: repeat:居中开始一直重复,超出部分剪裁掉 round:圆满地铺满,会拉伸或压缩 stretch:有多长拉多长 webkit浏览器对于round属性和repeat属性似乎没有区分,显示效果是一样的。
    查看全部
  • 阴影box-shadow 向盒子添加阴影,支持一个或多个(不同阴影的参数用逗号隔开)。 在class中添加box-shadow:值如下 x轴偏移量:必需,水平阴影的位置。允许负值。 y轴偏移量:必需,垂直阴影位置。允许负值 阴影模糊半径:可选,模糊距离(阴影产生模糊效果的距离) 阴影扩展半径:可选,阴影的尺寸 阴影颜色:可选, 阴影的颜色,默认为黑色 投影方式:可选(设置inset时为内部阴影方式,默认为外部) 注:inset放在参数第一个或者最后才有效 当xy轴偏移量为0,而阴影扩展半径不为0时四边均有阴影,否则只有左、上有阴影。 同一阴影参数之间用空格隔开,多个阴影之间用逗号隔开
    查看全部
  • 圆角效果: 在class中加入border-radius:10px;所有圆角都使用半径为10px的圆角 border-radius:5px 4px 3px 2px;左上角、右上角、右下角、左下角圆角半径(顺时针顺序) ps:border-radius的值还可以用百分比或em,但兼容性不好 实心上半圆:在class中设置高度为宽度一半,并且只设置左上角与右上角的半径与元素高度一致(大于也可) height:50px; width:100px; border-radius:50px 50px 0 0; 实心圆:高度宽度设置一致,四个圆角值为其一半
    查看全部
  • 在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2015-09-01

  • 《上下半圆》: 方法:把高度(height)设为宽度(width)的一半 并且只设置左上/左下角和右上/右下角的半径与元素的高度一致(大于也是可以的)。 《左右半圆》: 方法:把宽度(width)设为高度(height)的一半 并且只设置左上/右上角和左下/右下角的半径与元素的宽度一致(大于也是可以的)。
    查看全部
  • /*使用伪元素制作导航列表项分隔线*/ .nav li:before{ content:""; position:absolute; right:0px; top:20px; height:15px; width:1px; background:linear-gradient(to top,#f82f87,#B0363F,#f82f87);
    查看全部
  • 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2015-08-31

  • 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
    查看全部
  • text-shadow可以用来设置文本的阴影效果。 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。
    查看全部

举报

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

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