一、. 圆角
border-radius:;
可以取1-4个值（规则同margin）
可以取px和%
一般用像素，画圆的时候用百分比：border-radius:50%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 800px;
height: 200px;
background-color: pink;
/* 设置圆角 可以取值px和% */
/* border-radius:10px 20px 30px 50px; */
/* border-radius: 10%; */
border-radius: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: plum;
/* border-radius: 100px ; */
border-radius: 50% ;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
二、 盒阴影
box-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 阴影大小 颜色 位置;
水平方向偏移位置 必须 可取正负
垂直方向偏移位置 必须 可取正负
模糊度 可选 正值
阴影大小 可选 正负
颜色 可选
位置 可选 outset(外阴影，默认)|inset(内阴影)
例子：
box-shadow:0 15px 30px rgba(0,0,0,.1);（最常见）
box-shadow:0 0 30px #ccc inset;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 303px;
height: 375px;
background-color: red;
margin: 50px;
}
.box:hover{
/*
第一个值：水平方向偏移的位置，可以取正负
第二个值：垂直方向偏移的位置，可以取正负
第三个值：模糊度，取值越大，模糊越明显，不可以取负值
第四个值：阴影的大小，可以取正负
阴影的颜色：可选
阴影的位置：可选，默认outset：外阴影 取值inset：内阴影
*/
/* box-shadow: green 10px 10px 30px 10px inset; */
/* box-shadow: 0 15px 30px gold; */
box-shadow: 0 0 30px inset;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
三、 背景渐变
3.1 线性渐变
background-image:linear-gradient(渐变的方向,颜色1,颜色2,...);
渐变的方向可以省略，默认从上往下渐变
可以取值to right，to left， top top，to right top，to left bottom
可以取值弧度(deg)
例子：background-image: linear-gradient(120deg,#ff3149,#ff64a6);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 800px;
height: 500px;
border: 2px solid #000;
/* 背景渐变 */
/* background-image: linear-gradient(to right top,red,orange,yellow,green,blue); */
background: linear-gradient(-90deg,red,orange,yellow,green,blue);
}
.box1{
width: 60px;
height: 60px;
background-image: linear-gradient(120deg,#ff3149,#ff64a6);
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1">免息</div>
</body>
</html>
3.2 径向渐变 扇形渐变 射线渐变（基本用不上）
有浏览器兼容性问题
background-image:radial-gradient(中心点,形状(circle),颜色1,颜色2,...);
四、 选择器
4.1 基础选择器
全局选择器
元素选择器
类选择器
ID选择器
4.2 关系选择器
子代选择器
后代选择器
相邻兄弟选择器
通用兄弟选择器
4.3 伪类选择器
:link
:visited
:hover
:active
C3新增
:first-child 第一个子元素是...
:last-child
:nth-child()
:first-of-type 第一个...元素
:last-of-type
:nth-of-type()
:focus 获取焦点
4.4 伪对象选择器 伪元素选择器 (掌握)
1）在元素内部最前面插入内容(相当于第一个子元素)
::before{
content:"";
}:before或者::before都可以，推荐写::before
2）在元素内部最后面插入内容(相当于最后一个子元素)
::after{
content:"";
}3）应用
①插入文字(了解)
.box::before{
content: "前面";
}
.box:after{
content: "后面";
}②插入图片(了解)
.box::before{
content: url("./images/1.gif");
}
.box::after{
content: url("./images/1.gif");
}③自定义插入的内容(掌握)
.box::before{
/* 自定义插入的内容content内容为空 */
/* 默认插入的内容不是块级元素，设置宽高不生效 */
display: block;
content: "";
width: 100px;
height: 2px;
background-color: red;
}
.box::after{
display: block;
content: "";
width: 2px;
height: 100px;
background-color: green;
}4.5 属性选择器(了解)
利用html的属性
[属性] 有此属性的所有元素
[属性=属性值] 此属性=属性值的所有元素
元素[属性=属性值] 此属性=属性值的指定元素
元素[属性^=值] html属性值以值开头
元素[属性$=值] html属性值以值结尾
元素[属性*=值] html属性值包含指定的值
（没学明白，不常用，算辽）
五、 转换 变型
5.1 作用
使元素在位置、形状、大小上发生改变
5.2 属性
transform:translate(0,0) rotate(0deg) scale(1) skew(0deg,0deg);
位移 旋转 缩放 倾斜
5.3 位移
transform:translate(x,y);
取值px、%(相对于元素自身的宽高)
取正值，元素往右下移动；取负值，元素往左上移动
当只取一个值，表示水平方向位移的距离
当取两个值，表示水平和垂直方向位移的距离
transform:translateX();
transform:translateY();
transform:translate3D(x,y,z);5.4 旋转 单位deg(弧度)
transform:rotate();
2D旋转只取一个值
当取正值，顺时针旋转
当取负值，逆时针旋转
5.5 缩放
取值为数值 默认为1，取值<1,缩小，取值>1:放大
transform:scale(x,y);
当只取一个值表示等比例缩放
当取两个值，表示水平和垂直方向缩放
transform:scaleX();
transform:scaleY();
transform:scale3D(x,y,z);5.6 倾斜 单位为deg(弧度)
transform:skew(x,y)
当只取一个值，表示水平方向倾斜的弧度
当取两个值，表示水平和垂直方向倾斜的弧度
transform:skewX();
transform:skewY();六、过渡
6.1 作用
使元素从一种样式逐渐变为另外一种样式
6.2 属性
1）过渡的属性 可选
transition-property:属性1,属性2,...;
简写all(所有的)
可以过渡的属性：
①阴影 box-shadow
②转换 transform
③取值为数值 width、height、top、left、margin等
④取值为颜色 color、background-color、border-color等
2）过渡的持续时间 必须
transition-duration:;
默认值为0s
取值s|ms
3）过渡的速度变化类型 可选
transition-timing-function:;
ease：先加速后减速
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速
linear：匀速
4）过渡的延迟时间 可选
transition-delay:;
默认值0s
取值s|ms
可以取负值，表示把这段时间的效果跳过
5）简写 (掌握)
transition:all 持续时间 速度变化类型 延迟时间;
可选 必须 可选 可选
transition：1s;
6.3 注意
过渡的属性加在元素上
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
