前端面试题 ：CSS样式
程序员文章站
2022-06-09 18:01:27
...
1、隐藏元素方法
transform:scale(0）//占位隐藏 缩小
visibility:hidden// 占位隐藏
display:none //页面消失 不占位
opacity:0// 隐藏 占位
定位隐藏 元素存在,页面消失
2、两张图重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 300px;
background-image:-webkit-cross-fade(url(./1.jpg),url(./2.jpg),50%) ;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
3、半遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 200px;
background-repeat: no-repeat;
background-image:-webkit-cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICRAEAOw==),url(./2.jpg),50%) ;
background-size: 100%;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
3、 字 的上方加小点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 200px;
-webkit-text-emphasis:circle red;//可自定义
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4. css实现0.5px边框
<div class="borders">0.5边框</div>
.borders{
border: none;
position: relative;
}
/*下边框为0.5*/
.borders::after{
content: '';
position:absolute;
bottom: 0;
left: 0;
background: red;
height: 1px;
width: 100%;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
/*四条边框都为0.5*/
.borders::after{
content: '';
position:absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid red;
box-sizing: border-box;
transform: scale(0.5);
transform-origin: left top;
}
5. 未知宽高的盒子垂直水平居中的方案
<div class="box">
<div class="middle">这是要居中的盒子</div>
</div>
（1）弹性盒
.box{
display: flex;
justify-content: center;
align-items: center;
}
（2）使用定位
.box{
position: relative;
}
.middle{
position: absolute;
margin: auto;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
6. 如何用css实现正方形
7. css画等腰三角形
上一篇： 图着色问题
下一篇： 前端面试 - 移动端常用技巧