CSS3知识点整理
2018-09-25 本文已影响0人
一颗脑袋
css3重要模块
css3模块选择器
选择器有很多,我们可以根据实际情况来选择使用,常用的选择器可参考这篇文章(文章中有一些错误描述,不理解的百度即可)
https://www.cnblogs.com/caoyc/p/5855426.html
框模型
CSS3新增了关于边框方面的样式,比如圆角边框、矩形阴影、图形边框等。丰富了边框样式,我们可以尝试一下:
1.border-radius
2.box-shadow
3.border-image
radius是半径的意思,所以使用border-radius
就可以设置圆角边框的半径,让边框出现圆角效果。
shadow为阴影的意思,所以使用box-shadow
就可以为元素设置阴影效果,这里是box不是border。语法规则:
box-shadow(h-shadow v-shadow blur spread color inset
同样,border-image可以将图片作为边框样式,以下是相关属性:
背景
CSS3新增了一些控制背景的属性。
clip是裁剪的意思,所以
background-clip
就是用来设置背景的裁剪区域的,根据盒模型分为内容区域content-box、内边距区域padding-box以及外边框区域border-box。注意:目前没有外边距区域及margin-box。origin是起源的意思,
background-origin
也是用来定位背景区域的,但与background-clip不同的是,backgorund-clip是定位背景图片的,后者是用于定位背景颜色的。backgorund-size
顾名思义是用来定义背景图的尺寸的,有四种参数形式,数字型直接设置固定的宽高、百分比型:设置占容器百分比的宽高、cover:完全覆盖整个容器、contain:覆盖内容区域。