CSS第二天笔记

css第二天
边框
其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增
强原则的特征，我们需要重点掌握。
边框圆角
border-radius每个角可以设置两个值 ，x 值，y 值
1: 边框圆角处理
2: 正方形
3：椭圆
圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。
如下图


可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/” 前面的
1~4 个用来设置横轴半径（分别对应横轴 1、2、3、4 位置 ），“/”后面 1~4 个参
数用来设置纵轴半径（分别对应纵轴 1、2、3、4 位置 ）
边框阴影
box-shadow 与 text/shadow 用法差不多
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
box-shadow: 5px 5px 27px red, -5px -5px 27px green;
3、模糊度是不能为负值；
4、inset 可以设置内阴影；

设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边
框阴影，实现更好的效果，增强立体感。
边框图片
border-image: url(“images/border.png”) 27/20px round
border-image 设置边框的背景图片.
border-image-source:url(“”) 设置边框图片的地址.
//裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片. border-imageslice:27,27,27,27
//指定边框的宽度. border-image-width:20px;
//边框平铺的样式 stretch 拉升
round 会自动调整缩放比例
repeat(重复)
border-image-repeat: stretch;
设置的图片将会被“切割”成九宫格形式，然后进行设置。
1、round 和 repeat 之间的区别
round 会自动调整尺寸，完整显示边框图片。
repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。
2、更改裁切尺寸
background-slice: 34 36 27 27 分别设置裁切如下图
关于边框图片重点理解 9 宫格的裁切及平铺方式，实际开发中应用不广泛， 但是如
能灵活动用会给我们带来不少便利。
渐变
渐变是CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，
有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
线性渐变 （gradient 变化）
linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果。
代码 案例：












径向渐变 (radial 径向)
radial-gradient 径向渐变指从一个中心点开始沿着四周产生渐变效果

background: radial-gradient( 150px at center, yellow,
);
green
围绕中心点做渐变，半径是 150px，从黄颜色到绿颜色做渐变. 1、必要的元素：
a、辐射范围即圆半径 (半径越大，渐变效果越大)
b、中心点 即圆的中心 (中心点的位置是以盒子自身)
以左上角为圆的中心点
background: radialgradient( 150px at left
center, yellow,
green
);
background: radial-gradient( 150px at 0px 0px, yellow,green
);
c、渐变起始色
d、渐变终止色
2、关于中心点：中心位置参照的是盒子的左上角
3、关于辐射范围：其半径可以不等，即可以是椭圆

div{
width: 300px;
height: 300px;
margin:100px auto;
background: radialgradient( 250px at 0px
0px, yellow,
green
);
border-radius: 150px; }
案例：





背景
背景在CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位
参照点、多重背景等。
background-size:width,height 可以设置背景图片的宽度以及高度
1、background-size 设置背景图片的尺寸
background-size:600px,auto;自动是适应盒子的宽度background-size: 100% auto; 当宽度发送改变时，高度会有内容溢出。常规用法，通过百分百，和像素来调整背景的尺寸.background-size: auto 100%;
cover 会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
整个背景图片完整显示在背景区域.contain 会自动调整缩放比例，保证图片始终完整
显示在背景区域。也可以使用长度单位或百分比
2、background-origin(原点，起点)设置背景定位的原点所谓的背景原点就是调整背
景位置的一个参照点
border-box 以边框做为参考原点； padding-box 以内边距做为参考原点； contentbox 以内容区做为参考点；
3、background-clip 设置背景区域clip(裁切) border-box 裁切边框以内为背景区域；
padding-box 裁切内边距以内为背景区域； content-box 裁切内容区做为背景区域；
4、以逗号分隔可以设置多背景，可用于自适应局 背景图片尺寸在实际开发中应用十
分广泛。
过渡(transition)
Transition:param1 param2
param1 要过渡的属性
param2 过渡的时间.
过渡是CSS3 中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动
画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态

帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
transition-property 设置过渡属性
transition-duration 设置过渡时间 用来控制速度linear(匀速) ease-in (加速)
transition-timing-function 设置过渡速度
transition-delay 设置过渡延时 超过时间后执行动画. 以上四属性重在理解
案例


2D 转换
转换是CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚
至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之 前只能靠Flash
才可以实现的效果。在css3 当中，通过transform(变形) 来实现
2d 或者 3d 转换,其中 2d 有，缩放，移动，旋转。
缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y 的取值可为
小数，不可为负值；

移动 translate(x, y) 可以改变元素的位置，x、y 可为负值；
x 在水平方向移动。
y 在垂直方向移动。
旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
案例 1，火箭移动


案例 2 盾牌，将位置还原