小米心得

 

 

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

小米心得

上一篇:移动端web前端开发


下一篇:RESTful API Design: 13 Best Practices to Make Your Users Happy