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
网友评论