十天精通CSS3_技术问答

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

十天精通CSS3

                
                大漠
            Web前端工程师

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

全部评论问答未解决精华

FloatingShuYin

偏移就是平移意思

0 2-2 CSS3边框阴影 box-shadow（一）

2017-12-29

FloatingShuYin

对了,如果x和y为负值,那么这些规律中的右边界,下边界,向右,向下分别改为左边界,上边界,向左,向上.

如果是内阴影,那么其中的右边界和下边界向右,向下分别改为左边界,上边界,向右,向下.

1 2-2 CSS3边框阴影 box-shadow（一）

2017-12-29

FloatingShuYin

再补充一点,其实并不一定是z>x&&z>y时左上边界才会发生偏移
任何值都会偏移,只是看不到效果而已.
当z === x &&z === y时,左上边界分别向左上偏移了0px而已,
而如果z < x && z < y时,左上边界分别向左上偏移的z-x z-y 个像素,这是负值,所以阴影区间向右下缩进去了,又被DOM节点挡住了而已.

1 2-2 CSS3边框阴影 box-shadow（一）

2017-12-29

FloatingShuYin

又看了些资料,发现并不是按坐标系来偏移的,而是按盒子模型中的盒子边界偏移的.
也就是说就是这个正方形的四个边偏移的
总结了一些规律:
x 与y为正数时,右边界向右偏移x个像素 ,下边界向下偏移y个像素
偏移后的边界与原本的盒子模型边界形成的区间就是阴影了
就算加入扩展半径这也是解释的通的
如果x 与y为正数时,扩展半径也为x时,右边界向右偏移x+x个像素,下边界向下偏移y+x个像素
这很容易理解,扩展嘛,在原有基础上扩展
而如果x 与y为正数时,扩展半径为z,且满足z>x&&z>y时.,右边界向右偏移x+z个像素,下边界向下偏移y+z个像素的同时,左上边界也会分别偏移z-x个像素z-y个像素

2 2-2 CSS3边框阴影 box-shadow（一）

2017-12-29

qq_扬帆起航_28

a[class^="column"]{background:red;}
a[href$=doc]{background:green;}
a[title*=box]{background:blue;}

0 6-1 CSS3选择器属性选择器

2017-12-29

FloatingShuYin

.boxshadow-outset{
margin:18% auto;
width:100px;
height:100px;
box-shadow:4px 4px 6px 1px #666,
10px 10px 50px 10px #888 inset;
border-radius:50px;
}
.boxshadow-outset:hover {
transform: scale(1.4);
transition:transform 0.5s;
}

0 2-3 CSS3边框阴影 box-shadow（二）

2017-12-29

FloatingShuYin

请注意! css的坐标系,一般以左上角为原点!

1 2-2 CSS3边框阴影 box-shadow（一）

2017-12-29

FloatingShuYin

box-shadow有六个参数
1.offset-x 阴影在x轴的距离。正数向右偏移，负数向左偏移。
2.offset-y 阴影在y轴的距离。正数向下偏移，负数向上偏移。
3.blur 模糊的尺度，
4.spread 阴影的扩展。
（前四个都是以px 等距离单位为单位的数值）
5.color 阴影的颜色。可以是任何合法的颜色表示法表示的数据。
6.position 阴影的位置，两种取值
（1）.outset 不用设置默认就是外部阴影
(2).inset 阴影位于内部

3 2-2 CSS3边框阴影 box-shadow（一）

2017-12-29

大年糕

建议把第八章和第九章学完，再做这个练习

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

2017-12-28

AllySu

强迫症，标题h2必须加text-align:center;居中显示

2 10-6 CSS3 跨列设置column-span

2017-12-27

AllySu

css3 都这么厉害了，那还需要JavaScript吗？

0 8-7 CSS3中的动画--过渡属性 transition-property

2017-12-27

qq_杀意隆_0

前面都没讲3d的，怎么练习是做3d的？

2 9-10 制作3D旋转导航综合练习题

2017-12-26

夏虫不可语冰冰凉凉

从前有座山
山里有座庙
庙里有个老和尚
长的真的俏
俏也不争春
只把春来报
待到山花浪漫时
他在丛中笑

1 11-2 media queries——媒体类型（二）

2017-12-26

夏虫不可语冰冰凉凉

没人了？？

0 11-2 media queries——媒体类型（二）

2017-12-26

夏虫不可语冰冰凉凉

我选择死亡

2 10-8 CSS3 伸缩布局（一）

2017-12-26

首页上一页 20 21 22 23 24 25 26 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

十天精通CSS3