十天精通CSS3_技术问答

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

十天精通CSS3

                
                大漠
            Web前端工程师

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

全部评论问答未解决精华

兼容并包

第三部（评论限制字数原因分开写了，而且我这个只是简单粗暴，互喷）
.box3{
width: 400px;
height:200px;
background-color: red;
border-radius:0 0 200px 200px;
clear: both;
}

1 2-1 CSS3边框圆角效果 border-radius

2017-04-24

兼容并包

第二步
.box1{
width: 200px;
height:100px;
background-color: red;
border-radius:100px 100px 0 0;
float: left;
}
.box2{
width: 200px;
height:100px;
background-color: red;
border-radius:100px 100px 0 0;
float: left;
}

1 2-1 CSS3边框圆角效果 border-radius

2017-04-24

兼容并包

做爱心第一步<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

2 2-1 CSS3边框圆角效果 border-radius

2017-04-24

shan330

#brand:target {
background: orange;
color: #fff;
}
怎么回事没效果

0 6-5 CSS3 结构性伪类选择器—target

2017-04-23

shan330

contain :根据图片自身的宽高比例调整大小，调整到有一个值跟容器一致就不再变化，如果它的比例跟容器比例不一致那么不能填满容器。
cover：不改变原来图片比例，覆盖容器超出部分相当于裁掉了。
100% 100%；根据容器的比例来，造成图片可能跟自身原比例不一致。理解没错吧？

3 5-3 CSS3背景 background-size

2017-04-23

shan330

0 5-2 CSS3背景 background-clip

2017-04-23

shan330

background-origin:border-box| padding-box| content-box;

0 5-1 CSS3背景 background-origin

2017-04-23

shan330

强制文本在一行显示，同时溢出部分显示成省略号：代码
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

再来：text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap

1 4-1 CSS3文字与字体 text-overflow 与 word-wrap

2017-04-23

shan330

感谢点赞最多那位同学提供的网址，看懂了：word-wrap:break-word;就是字符串太长了，在第一行剩余部分显示不下，就直接另起一行来显示，如果第二行仍然不够，会直接断掉，超出部分转到第三行显示；
而 word-break:break-all ; 这个相对来说就比上面那个更节省空间：就算当行不够空间，仍然直接就在当行显示，把超出部分断掉显示到第二行。

3 4-1 CSS3文字与字体 text-overflow 与 word-wrap

2017-04-23