慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

qq_Dream_High

background-size 设置背景图片的大小，以长度值或者百分比显示，还可以通过cover和contain对图片进行伸缩。

查看全部

0 采集收起来源：CSS3背景 background-size
2016-03-24
qq_Dream_High

text-shadow

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2016-03-23
qq_Dream_High

ellipsis hidden nowrap 内容溢出时产生省略号

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-03-23
专注的前端工程师

border-image:url() repeat; 给边框加上图片与background:url(xx.jpg) 10px 20px no-repeat;相似 border-image：url(图片地址) 70 70 70 70 (切割图片的宽度，单位px可省略) repeat/round/stretch(重复、铺满、拉伸)

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-03-23
专注的前端工程师

盒子阴影 x:负左右正； y:负上正下； 1、阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

1 采集收起来源：CSS3边框阴影 box-shadow（二）
2016-03-23
专注的前端工程师

box-shadow是向盒子添加阴影。支持添加一个或者多个。语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。为元素设置外阴影：示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333; } 为元素设置内阴影：示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333 inset; } 添加多个阴影：以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-03-23
专注的前端工程师

border-radius是向元素添加圆角边框。使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 单位：px、百分比、em(后两者兼容性目前还不好) 实心上半圆：方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 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;/*四个圆角值都设置为宽度或高度值的一半*/ }

查看全部

1 采集收起来源：CSS3边框圆角效果 border-radius
2016-03-23
IsYang

multiple backgrounds 多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。语法缩写如下： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式： background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意：用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
IsYang

background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
IsYang

background-clip:用来将背景图片做适当的裁剪以适当实际需要语法：background-clip: border-box(从边框向外裁剪背景-默认值) | padding-box(内填充向外裁剪背景) | content-box(内容区域向外裁剪背景) | no-clip(表示不裁切，和参数border-box显示同样的效果)

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-03-23
IsYang

background-origin:设置元素背景图片的原始起始位置语法：background-origin: border-box(背景图从边框开始显示) | padding-box(内边距开始显示-默认值) | content-box (内容区域开始显示) 注意：如果背景不是no-repeat,这个属性无效，会从边框开始显示

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-03-23
IsYang

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： @font-face{ font-family:"字体名称:; src:url(字体文件在服务器上的相对或绝对路径); } 设置后，就可以使用普通字体一样在（font-*）中设置字体样式，与@font-face设置的名称相同

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
IsYang

text-overflow:用来设置是否使用一个省略标记（...）标示对象内文本的溢出 text-overflow:clip(表示剪切) | ellipsis（表示显示省略标记） text-overflow只是用来说明文字益出时的方式显示，要实现溢出产生的省略号的效果，还需定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）,只有这样才能实现溢出文本显示省略好的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时word-wrap：可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。 word-wrap:normal(控制连续文本换行)|break-word（两边内容在边界内换行）

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-03-23
sytasxz

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-03-23
yangyuan

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2018-03-22

首页上一页 591 592 593 594 595 596 597 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果