慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

布偶阿喵

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式： 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; 注意： 1.用逗号隔开每组 background 的缩写值； 2.如果有 size 值，需要紧跟 position 并且用 "/" 隔开； 3.如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 4.background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
布偶阿喵

background-size: auto | <长度值> | <百分比> | cover | contain 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上根据父标签进行百分比的切割； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
布偶阿喵

background-origin: border-box; /*用来定义背景图像的原始起始位置*/ 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。 background-clip: content-box; /*clip指定在哪些区域显示背景图像*/ /*而origin指定从哪个区域开始绘制图像*/ 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

查看全部

0 采集收起来源：CSS3背景 background-origin
2017-03-25
布偶阿喵

text-shadow可以用来设置文本的阴影效果。 text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2017-03-25
布偶阿喵

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。 p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }

查看全部

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

text-overflow: ellipsis; /*clip 修剪文本*/ /*ellipsis 用省略号来表示被修剪的文本*/ text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; word-wrap也可以用来设置文本行为 word-wrap: normal; /*用来定义文本超过指定容器的边界时是否断开转行*/ /*当英文格式下，单词字母过长时，normal会保证单词完整*/ /*而word-break会拆开单词强制换行以保证在规定宽度内*/ normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2017-03-25
布偶阿喵

background: linear-gradient(45deg, #99d6cf,#ccd6d6); 线性渐变 background: radial-gradient(#fff,#99d6cf,#4aa2d6); 径向渐变第一个参数指定渐变方向，可以用“角度”的关键词或“英文”来表示，省略时，默认为“180deg”，等同于“to bottom”。第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 background: repeating-radial-gradient( circle,#fff 10%,#99d6cf,#4aa2d6); 重复径向 circle:圆形径向，ellipse椭圆径向（默认） background: radial-gradient(20% 50%,closest-corner,#fff 50%,#4aa2d6 20%); background: -webkit-radial-gradient(20% 50%,closest-corner,#fff 50%,#4aa2d6 20%); /*兼容必写*/ /*(20% 50%)圆心的位置*/ /*closest-corner:离圆心最近的角*/ /*closest-side:离圆心最近的边*/ /*farthest-side:离圆心最远的边*/ /*farthest-corner:离圆心最远的角*/

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2017-03-25
布偶阿喵

background: rgba(255,255,0,1); /*红绿蓝透明度*/ background: hsl(60,100%,80%); /*色调饱和度亮度*/ background: hsla(60,100%,80%,1); /*色调饱和度亮度透明度*/

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2017-03-25
布偶阿喵

border-image：url(图片路径) 70 70 70 70 (切割图片的宽度，省略px) repeat (图片延伸方式三个可选参数：round（平铺） repeat（重复） stretch（拉伸）) repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。 round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸） stretch 很好理解就是拉伸，有多长拉多长。 border-image-source: url("images/ling.png"); /*source路径*/ border-image-slice: 27 27 27 27 fill; /*slice裁剪背景图片*/ /*fill中间属性不透明*/ /*四值：顶右底左*/ /*三值：顶左&右底*/ /*两值：顶&底左&右*/ border-image-width: 20px; /*width背景图像的显示大小*/ /*border-image-outset: 20px;*/ /*outset背景图像的偏移位置*/ border-image-repeat: round; /*repeat：重复 round：铺满 stretch：拉伸*/

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2018-03-22
Chelsea_学web

transition-duration: .5s; (动画过度的持续时间)transition-timing-function: ease;(动画类型) transition-delay: .1s;(延迟时间）

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2017-03-25
布偶阿喵

border-radius: 25px 10px 5px 30px/25px 10px 5px 30px; /*两值：左上&右下左下&右上*/ /*三值：左上右上&左下右下*/ /*四值：左上右上右下左下*/ /*八值：左上x轴右上x轴右下x轴左下x轴/左上y轴右上y轴右下y轴左下y轴*/ 实心上半圆：方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2018-03-22
布偶阿喵

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量必需，水平阴影的位置，允许负值 Y轴偏移量必需，垂直阴影的位置，允许负值阴影模糊半径可选，模糊距离阴影扩展半径可选，阴影的尺寸阴影颜色可选，阴影的颜色，省略默认黑色投影方式可选，（设置inset时为内部阴影方式，如果省略为外阴影方式） inset可以写在参数的第一个或最后一个，其他位置是无效的阴影模糊半径与阴影扩展半径的区别阴影模糊半径：其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2017-03-25
ppyyrr

CSS3中设置动画播放方向 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-前缀！

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2017-03-25
ppyyrr

CSS3中设置动画播放次数 animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite，动画将会无限次的播放 animation-iteration-count:5; 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

查看全部

1 采集收起来源：CSS3中设置动画播放次数
2018-03-22
ppyyrr

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。语法规则： animation-delay:<time>[,<time>]*

查看全部

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

首页上一页 278 279 280 281 282 283 284 下一页尾页

0/150

提交

取消

开始学习

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

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