慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

SlenderBai

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

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
殘花雨襲

CSS3的兼容性前缀：-ms:IE; -webkit:谷歌chrome和苹果safari; -moz:火狐firefox; -o:opera;

查看全部

0 采集收起来源：什么是CSS3？
2017-04-24
SlenderBai

文本阴影语法：text-shadow:水平偏移量垂直偏移量阴影模糊程度阴影颜色;

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2017-04-24
SlenderBai

加载字体： @font-face{ font-family:字体名称; src:字体文件在服务器上的相对或绝对路径; } 调用字体：设置的时候font-family值和定义时的相同

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2017-04-24
SlenderBai

text-overflow:clip(剪切)|ellipsis（显示省略号） text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2017-04-24
SlenderBai

渐变色彩语法:linear-gradient(渐变方向，起始点颜色，结束点颜色); 方向：0deg=to top 90deg=to right 180deg=to bottom 270deg=to left to top left to top right

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2017-04-24
SlenderBai

border-image语法:border-image:url(路径) 图片宽度 round|repeat|stretch

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2017-04-24
SlenderBai

阴影box-shadow语法:box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; inset要写在参数的第一位或最后一位。多个阴影用逗号分隔。

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2017-04-24
SlenderBai

实心上半圆：方法：把高度(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;/*四个圆角值都设置为宽度或高度值的一半*/ }

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2017-04-24
慕粉1235539066

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2017-04-22
慕粉1235539066

column:column-width||column-count

查看全部

0 采集收起来源：CSS3 多列布局——column-count
2017-04-22
慕粉1235539066

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2017-04-22
慕粉1235539066

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。第一个时间的值为 transition-duration，第二个为transition-delay。

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2017-04-22
慕粉1235539066

div { width: 200px; height: 200px; background-color: orange; margin: 20px auto; border-radius: 100%; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function:linear; transition-timing-function:linear; -webkit-transition-delay: .2s; transition-delay: .2s; }ease 速度由快变慢 linear恒速 ease-in速度越来越快 ease-out速度越来越慢 ease-in-out先加速再减速

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2017-04-22
慕粉1235539066

宽度从200px慢慢过渡到400pxdiv { width: 200px; height: 200px; background: red; margin: 20px auto; -webkit-transtion-property: width; transition-property: width; -webkit-transition-duration:.5s; transition-duration:.5s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: .18s; transition-delay:.18s; } div:hover { width: 400px; }

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2017-04-22

首页上一页 250 251 252 253 254 255 256 下一页尾页

0/150

提交

取消

开始学习

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

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