CSS3（周学习-总结）

CSS3

背景裁切

1 基本语法格式:background-clip:属性值
2 一般background-clip是和background-origin搭配使用
3 必须写浏览器的私有前缀(用chrome举例:-webkit-background-clip:border-box)

• border-box:相对于盒子边框 进行裁切
• padding-box:相对于边距进行裁切
• content-box:相对于盒子内容进行裁切

背景大小

1 基本语法

• 背景大小是用背景图来进行设置
• 常用的取值有两种(像素和百分比)
• 常见的属性:contain/cover

背景渐变色

注意：背景渐变是指背景图，不是指背景色
基本语法:background-images:
1 线性渐变

• 必须写浏览器的私有前缀(以chrome举例:background-image:-webkit-linear-gradient)
• linear-gradient(开始的位置，颜色值1，颜色值2.....)
• 默认的的情况下第一个颜色会在起始位置出现，最后一个颜色会在结束的位置位置出现，中间的颜色会在等分点的位置出现
• 可以在颜色的后面加上一个百分比，显示出现的位置

2 经向渐变

• 必须写浏览器的私有前缀
• 基本语法:background-image:radial-gradient(起始点的横坐标,起始点的纵坐标，颜色值1，颜色值2，)
• 最后书写的颜色值是会出现在离起点最远的地方

盒子阴影：

• 基本语法:box-shadow:第一个值是x轴的正值，第二个是Y轴的正值，第三个是羽化程度，第四个是延展的长度，第五个是颜色书写，第六个是内阴影的设置（inset）
• 方向是顺时针方向进行执行
• 可以设置多个阴影，只需要使用逗号隔开即可。

div{
      box-shadow:0px 0px 20px 10px  red /;
     }

显示的效果如下：

盒子的阴影.png

文字阴影

• 基本语法:text-shadow:右 下 羽化值 颜色

过渡动画

核心属性:transition

1 基本语法和常见的属性值

• transition:过渡动画的属性，过渡的时间，缓动的曲线(默认ease)，延迟的时间
• 多个过渡动画可以使用逗号分隔开来。
• 当使用多个属性的时候可以用all来代替所有属性
• 只要是有值可以转化为成数值的属性都可以进过渡动画的实现
• 在chrome中甚至连背景图都可以发生过渡动画。
• 实现过渡动画有两步：①先进行元素的移上事件(可以使用hover)里面加上要过渡的属性值。②在元素里面加上过渡动画的核心属性以及相对应的值。

变型属性:transform

1 变型

• 变型变得是坐标轴
• 一个元素可以携带多个变型，且之间用逗号分隔开来即可(后一个变型是依照前一个变型的基础上进行变型，当最后一个坐标完成之后，坐标轴才会回到初始位置)

2 二维变型（样式/值为deg)

• 旋转:rotate/方向为顺时针方向
• 斜切:skew/方向为
• 缩放:scale/x轴的缩放和Y轴的缩放（如果只写一个值，那么就会等比缩放）
• 位移变型:translate/方向是x轴的正向平移和Y轴的正向平移的距离(如果设置百分比，那么百分比是相对于元素本身的)

                                                                                 10/11