为了账号安全,请及时绑定邮箱和手机立即绑定
  • box-shadow是向盒子添加阴影。支持添加一个或者多个。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: X轴偏移量 必需。水平阴影的位置。允许负值。 Y轴偏移量 必需。垂直阴影的位置。允许负值。 阴影模糊半径 可选。模糊距离。 阴影扩展半径 可选。阴影的尺寸。 阴影颜色 可选。阴影的颜色。省略默认为黑色。 投影方式 可选。外部阴影 (outset)内部阴影(inset),默认值为outset(outset是默认的,不需要添加)。 注意: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; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
    查看全部
  • 注意: 用逗号隔开每组background的缩写值; 如果有size值,需要紧跟position并且用"/"隔开; 分解写法时,background-color只能设置一个
    查看全部
  • background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain cover:将背景图片等比缩放以填满整个容器(100%) contain:将背景图片等比缩放至某一边紧贴容器边缘为止
    查看全部
  • 3个参数和background-origin一样 默认是border-box no-clip等同于border-box
    查看全部
  • background:url(http://static.mukewang.com/static/img/logo_index.png)left top / 75% 55% no-repeat, url(http://static.mukewang.com/static/img/logo_index.png) right bottom / 50% 40% no-repeat;
    查看全部
  • background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
    查看全部
  • background-origin 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 注意:如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
    查看全部
  • 1.@font-face xxx 2.font-family xxx
    查看全部
  • text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
    查看全部
  • 圆角效果 border-radius: 1.border-radius是向元素添加圆角边框。 2.border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 上面的全写方法: border-top-left-radius:10px; border-bottom-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 注:不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。 3.实心上半圆: 方法:把宽度(width)设为高度(height)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆: 方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码: div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } 4.实例;见代码快照
    查看全部
  • :root选择器和<html>元素的效果相同 eg:​ :root{background:orange} html {background:orange;}
    查看全部
  • http://img1.sycdn.imooc.com//5438cff800012a4d09080383.jpg
    查看全部
  • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; e.g. .box_shadow{ box-shadow:4px 2px 6px #333333; }
    查看全部
  • transition:property duration timing-function delay; eg: -webkit-transition: all .5s ease-in .2s; transition: all .5s ease-in .2s;
    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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