慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

微蓝lran

这个涉及到伪元素还需要再看看

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-03-19
微蓝lran

color:rgba(r,g,b,a) a表示透明度0-1，1表示完全不透明，0表示完全透明，这里面rgb取值0-255 也可用0-100%但是兼容性有问题

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2016-03-19
微蓝lran

border-image:url(border.png/*图片路径*/) 70 70 70 70/*切割图片的宽度，单位为像素，单省略px也可以使用百分比，遵循顺时针的规律来分别设置，也可以简写为70*/ repeat/*图片延伸方式三个可选参数为别为：round(平铺) repeat(重复) stretch(拉伸)*/

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-03-19
微蓝lran

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

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2016-03-19
微蓝lran

.box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-03-19
伽蓝寺听雨声

居中方法:设置 position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -moz-transform：translate（-50%，-50%）; transform:translate(-50%,-50%)

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-03-18
Leadn

火狐不支持column-span属性

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2016-03-18
我是你杜大叔

清除浮动 <pre> .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} </pre>

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
伽蓝寺听雨声

div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2016-03-18
langqiqi

制作导航菜单综合练习题

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-03-18
yangyuan

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。需给动画命名。 CSS: @keyframes wobble/*动画名称*/ { 0% { margin-left: 100px; background:green; } 40% { margin-left:150px; background:orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } } div { width: 100px; height: 100px; background:red; color: #fff; } div:hover{ animation: wobble/*动画名称*/ 5s ease .1s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2016-03-18
死丢皮少女p

使用伪类制作渐变的分割线

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-03-18
死丢皮少女p

文字溢出时使用省略标记： 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
2016-03-18
yangyuan

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2016-03-18
langqiqi

Flexbox布局功能主要具有以下几点：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2016-03-18

首页上一页 597 598 599 600 601 602 603 下一页尾页

0/150

提交

取消

开始学习

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

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