小米心得

扫码查看

1、进行hover  产生  背影界面 不知道怎么回事  截屏时  产生hover效果

可以在Google进行F12页面测试  点击hover框使不产生这个事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>反应边框</title>
</head>
<style>
body{
width: 960px;
}
.box{
height: 50px;
width: 50px;
margin: 0;
background: #9affce;
border:none;
}
:hover .box {
box-shadow: 10px 10px 5px #888888;
}
</style>
<body>
<div class="box">
name
</div>
</body>
</html>
2、outline css指的是什么?
outline是定义的一种属性用于

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性:

  • outline-color
  • outline-style
  • outline-width

3、opacity具体指的是:定义元素的透明性  网页详细地址

https://www.w3school.com.cn/cssref/pr_opacity.asp

4、transform:translate()

描述测试
none定义不进行转换。测试
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。 
translate(x,y)定义 2D 转换。测试
translate3d(x,y,z)定义 3D 转换。 
translateX(x)定义转换,只是用 X 轴的值。测试
translateY(y)定义转换,只是用 Y 轴的值。测试
translateZ(z)定义 3D 转换,只是用 Z 轴的值。 
scale(x,y)定义 2D 缩放转换。测试
scale3d(x,y,z)定义 3D 缩放转换。 
scaleX(x)通过设置 X 轴的值来定义缩放转换。测试
scaleY(y)通过设置 Y 轴的值来定义缩放转换。测试
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。 
rotate(angle)定义 2D 旋转,在参数中规定角度。测试
rotate3d(x,y,z,angle)定义 3D 旋转。 
rotateX(angle)定义沿着 X 轴的 3D 旋转。测试
rotateY(angle)定义沿着 Y 轴的 3D 旋转。测试
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。测试
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。测试
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。测试
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。测试
perspective(n)为 3D 转换元素定义透视视图。测试

https://www.w3school.com.cn/cssref/pr_transform.asp

12-17 20:42
查看更多