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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • background-color:rgba(100,120,60,0.5); color:rgba(R,G,B,A) A为透明度参数,取值在0~1之间,不可为负值
    查看全部
  • 可以理解为它是一个切片工具,会自动把用做边框的图片切割。 border-image:url(borderimg.png) 70 repeat 可见repeat就是一直重复,然后超出部分剪裁掉,而且是居中开始重复。 5显示不出来。而在chrome浏览器中5是存在的 为边框应用图片
    查看全部
  • 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
    查看全部
  • 跨列设置column-span 语法:column-span: none | all 取值: none:默认值,不跨跨越 all:跨越所有,定位在列的Z轴之上
    查看全部
  • column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说,就有点类似于常用的border属性。但column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置。
    查看全部
  • 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小; X轴偏移量为负数:阴影在左边下边 Y轴偏移量为负数:阴影在右边上边
    查看全部
  • 在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2015-07-29

  • box-shadow: X轴偏移量(水平阴影的位置 可负值) Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。默认外影方式。 如果添加多个阴影,只需用逗号隔开即可。如: .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
    查看全部
  • 列间距column-gap column-gap主要用来设置列与列之间的间距,其语法规则如下: column-gap: normal || <length> normal默认值,默值为1em(如果你的字号是px,其默认值为你的font-size值)。 <length>此值用来设置列与列之间的距离,其可以使用px,em单位的任何整数值,但不能是负值。 例如:将内容分三列显列,列与列之间的间距为2em,实现代码为: column-count: 3; column-gap: 2em;
    查看全部
  • border-radius:10px; /* 所有角都使用半径为10px的圆角 不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。 实心上半圆: 方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。 实心圆: 方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。
    查看全部
  • 盒子宽为900,每栏宽度为200,那应该是4列,题中给的是3列把设置的宽度200px给顶了
    查看全部
  • perspective:透视方式,也就是近大远小的显示方式。 镜头方向只能是平行Z轴向屏幕内,也就是从屏幕正前方向里看。 可以调整镜头与平面位置: a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。 b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。 在chrome中有一个问题,那就是perspective一定要在rotateY(或rotateX)的前面。否则perspective的设置会无效。
    查看全部
  • 多列布局——Columns 语法: columns:<column-width> || <column-count> 参数说明: <column-width>主要用来定义多列中每列的宽度 <column-count>主要用来定义多列中的列数
    查看全部
  • animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none(默认值,回到第一帧)、forwards(停在最后一帧)、backwords(回到第一帧)和both(同时具有forwards和backwards效果) 关于backwards和none的区别: backwards会在动画开始前显示动画的第一帧,例如当动画是在页面加载完成后5秒开始,动画是由红色渐变为绿色,而div本来的背景色是黑色。那么设置backwards属性会使得在动画尚未开始的前五秒div显示为红色,而设置none的话,前五秒会div会显示自己的背景色黑色。 both同时具有forwards和backwards效果即是在元素未开始前五秒显示为红色,最后停在最后一帧的位置。
    查看全部
  • 注意:Chrome或Safari浏览器,需要加入-webkit-前缀!
    查看全部

举报

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

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