十天精通CSS3_学习笔记

首页免费课十天精通CSS3 笔记

十天精通CSS3

                
                大漠
            Web前端工程师

                    查看讲师更多课程 
                    大漠讲师的其他课程
                
Sass进阶篇
中级·46635
免费课程
                                
Sass入门篇
中级·104425
免费课程
                                
玩转Bootstrap（JS插件篇）
中级·128651
免费课程
                                
玩转Bootstrap（基础）
初级·314544
免费课程
                                
                难度初级
            
                时长 5小时 0分
            
                学习人数
            
综合评分9.40
                            485人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.3
                                简洁易懂
                            
                                9.2
                                逻辑清晰

最热最新

Maizing

Media Queries——媒体类型（一）： Screen（电脑显示屏）、All（所有设备）和Print（打印用纸或打印预览视图）为最常见的三种媒体类型。

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2017-08-25
NadiaSmile

border-radius加圆角,box-shadow加立体效果; ::before ::after配合content加新元素; background: linear-gradient加线性分割; first-child,last-child{background:none}去掉不想要的

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2017-08-24
慕田峪3124030

a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2017-08-24
qq_Bu

box-shadow的inset属性只能写在参数的第一个或者最后一个

查看全部

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

chrome,safari:webkit firefox:moz ie:ms opera:o

查看全部

0 采集收起来源：什么是CSS3？
2017-08-24
慕尼黑3201204

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()); a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2017-08-23
慕尼黑3201204

如评论所述 1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央； 2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2017-08-23
寻阡陌Dorothy

top: 50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); 实用的元素居中写法

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2017-08-22
信者得救

用 left:50%; top50%; transform:trasnslate(-50%,-50%); 来使不知width的元素水平居中

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2017-08-22
杜鹃

div{width:350px;height:400px;border:solid 1px red;position:relative;} div span{width:80px;height:80px;border-radius:100%;background:orange;position:absolute;animation-name:around 1s ;animation-duration:5s;animation-timing-function:ease;animation-delay:1s;animation-iteration-count:infinite;} @keyframes around{ 0%{transform:translateX(100px);} 25%{transform:translateX(300px);} 50%{transform:translate(180px,180px);} 75%{transform:translate(0,180px);} 100%{transform:translate(0);} }

查看全部

0 采集收起来源：CSS3中调用动画
2017-08-21
_marven

css3是css2的升级版本。它在css2的基础上增加了很多强大的新功能。

查看全部

0 采集收起来源：什么是CSS3？
2017-08-21
LIANG_1993

圆角处理border-radius

查看全部

0 采集收起来源：CSS3能做什么？
2017-08-20
Kingziqiang

columns:<width||count> ||表示并列关系 |表示或

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2018-03-22
安然时光

重难点： 1.多加这两个阴影样式：“-webkit-box-shadow:”“-moz-box-shadow:”是为了兼容多浏览器的。 2.“z-index:-1;”是为了把红框盖住，只显示其阴影，如果把此行代码去掉，会看到一个红框。 3.“position:absolute;”“top:50%;”是以box为参考定位的。 4.class="box effect"，是类选择器的知识，及表示class=“box”与class="effect"的组合。如果把.effect换成.box效果依然相同，用.effect表示语义更加明白。

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
慕尼黑3201204

.effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; /*border-radius的含义是：圆角。*/ /*border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。写成椭圆*/ /*用两个::after和::before显得更明显的曲线阴影*/

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22