慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

敲敲更健康

box-shadow是向盒子添加阴影。支持添加一个或者多个。很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-01-26
敲敲更健康

圆角效果 border-radius border-radius是向元素添加圆角边框。使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用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;/*四个圆角值都设置为宽度或高度值的一半*/ }

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-01-26
敲敲更健康

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。前缀浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera

查看全部

0 采集收起来源：什么是CSS3？
2016-01-26
Coande

多重背景 background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2016-01-25
Lewi

很多还是不懂耶！！！

查看全部

0 采集收起来源：切换背景图像综合练习题
2016-01-25
于梦中

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

查看全部

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

animation-name:redToBlue; animation-duration: 5s; animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out; animation-delay: 1s; animation-direction: normal | alternate; animation-iteration-count: 5s|infinite ; animation-fill-mode: none | forwards | backwards | both;

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2016-01-25
于梦中

@font-face { font-family: "MO"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf"); } .demo { width: 340px; padding: 30px; color: #566F89; background: #599999; font-size:38px; font-family: "MO"; }

查看全部

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

//文本超出容器边界时显示省略号 text-overflow:ellipsis; //显示省略号 overflow:hidden; white-space:nowrap; //强制显示在一行

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-01-25
qq_不将就_19

input[type="text"]:enabled { }

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
出世Sunny

box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径][阴影扩展半径][阴影颜色][投影方式] x轴偏移量：水平阴影位置，必须 y轴偏移量：水平阴影位置，必须阴影模糊半径：模糊的距离阴影扩展半径：阴影的尺寸阴影颜色：默认为黑色投影方式：inset时为内部阴影，省略为外阴影

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-01-25
Coande

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

查看全部

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

background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-01-25
Coande

background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-01-25
Coande

text-shadow: X-Offset Y-Offset blur color;

查看全部

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

首页上一页 646 647 648 649 650 651 652 下一页尾页

0/150

提交

取消

开始学习

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

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