十天精通CSS3_技术问答

首页免费课十天精通CSS3 问答

十天精通CSS3

                
                大漠
            Web前端工程师

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

全部评论问答未解决精华

慕粉18221508921

/*任务一*/
.slider .clearfix li:nth-child(1)
/*任务二*/
.slider .clearfix li a::after
/*任务三*/
.slider .clearfix li:nth-of-type(1) a::after
/*任务四*/
.slider .clearfix li a::before
/*任务五*/
.slider .clearfix li a:hover::before
/*任务六*/
#bg1:target
/*任务七*/
img:not(:target)
/*好像也不是很难*/

17 7-8 切换背景图像综合练习题

2017-04-09

慕粉18221508921

丑，原来深蓝色背景白色字体多有内涵。。。

0 7-4 CSS3选择器 ::selection选择器

2017-04-09

Never25

/*1.制作圆角*/

border-radius:10px;

/*2.制作导航立体风格*/

box-shadow:0 5px #b64b41;

/*3.制作导航分隔线*/

.nav li{background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;}

/*4.删除第一个和最后一个导航分隔线*/

.nav li:last-child{background:none;}

0 5-5 CSS3背景制作导航菜单综合练习题

2017-04-08

Never25

background-clip ： border-box | padding-box | content-box | no-clip

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

0 5-2 CSS3背景 background-clip

2017-04-08

Never25

背景图片的原始位置：background-origin ： border-box | padding-box | content-box;

0 5-1 CSS3背景 background-origin

2017-04-08

Never25

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

0 4-3 CSS3文字与字体文本阴影text-shadow

2017-04-08

慕先生0077718

这个源码貌似有问题，找到一个一模一样的带有演示效果的源码，大家可以看看
http://www.qdfuns.com/notes/32286/67cc9b63876c630bb530070c0ace8d03.html

10 7-8 切换背景图像综合练习题

2017-04-07

青春快餐

再多说一句，如果是repeat这是从中间开始铺，遇到4个边角不够地方就裁剪，所以两边的缺角是对称的

0 2-4 CSS3边框为边框应用图片 border-image

2017-04-07

青春快餐

#border_image {
margin:0 auto;
height:448px;
line-height:100px;
text-align:center;
font-size:30px;
width:304px;
border:60px solid #ccc;
border-image: url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 8 17 8 40 repeat;
}其实border的宽度值和设border-image的数值没有太大关系，上下裁剪少，导致留下了左边的两个凸块

0 2-4 CSS3边框为边框应用图片 border-image

2017-04-07

青春快餐

图片被切4刀，成九宫格，四个角的切片被缩放到边框的4个角，不再做其他处理，而这个border-image的数值属性其实是有4个的，上右下左，第一个数值表示横着的这一刀切在离上边缘的距离（像素值或百分比），其他类同，还有repeat这个属性是不缩放平铺，铺到后边地方不够了就裁剪掉，而，round则为裁剪后的缩放重复下去，因此不会像repeat那样到四个边角时可能出现被裁剪，而stretch是只有一张拉伸占满。应该是这么理解。

4 2-4 CSS3边框为边框应用图片 border-image

2017-04-07