面试的时候被问到如何使用css3实现0.5的边框,当时脑袋蒙圈,想着直接设置border为0.5px,但肯定是不可以的。
思路:
- 将元素的伪元素高度设为1px,使用css3的渐变(linear-gradient),50%有颜色,50%透明,个人感觉思路没有问题,不知为何页面不展示线条。
- 伪元素 + scaleY(0.5) 实现边框为0.5px
补充
1. 线性渐变 linear-gradient
linear-gradient指沿着某条直线朝一个方向产生的渐变效果,默认是 to bottom。
background-image: linear-gradient(方向,起始颜色,终止颜色);
方向: to left right top bottom
角度: deg
1. 最简单的渐变
background-image: linear-gradient(red, green);
2. 设定渐变的方向
background-image: linear-gradient(to right, red, green);
3. 设定渐变的角度
background-image: linear-gradient(45deg, red, green);
4. 设定渐变的范围
background-image: linear-gradient(to right, red 20%, green 80%)
2. 径向渐变
radial-gradient指从一个中心点开始沿着四周产生渐变效果,默认中心点为center。
background-image: radial-gradeint(渐变范围(半径) at 渐变中心点位置, 起始颜色, 终止颜色 );
1. 最简单的渐变
background-image: radial-gradient(red, green);
2. 指定圆的半径和圆心
background-image: radial-gradient(200px at center, red, green);
3. 指定椭圆 (横向半径, 纵向半径)
background-image: radial-gradient(200px 80px at center, red, green);
4. 指定范围
background-image: radial-gradient(200px at center, green 50%, red 50%);
2. 伪元素 —> 假的标签
1. 符号: 双冒号(::)
E::before :在元素子节点的最前面添加一个内容。
E::after :在元素子节点的最后面添加一个内容。
2. 伪元素: 用样式模拟出结构的效果
(用css模拟出html的效果)
注意事项:
1. 伪元素是原标签的子元素,分别在元素的内部的前后模拟出来两个子标签
2. 伪元素默认是行内元素,无法设置宽高,需要指定display:block/position:absolute
3. 伪元素必须有content属性,就算值为空也必须写,可以在content属性中写入文本内容
4. 伪元素没有语义,一般在网页中用于一些没有语义的修饰效果,可以简化网页结构
(比如导航栏每个li标签后面有个小箭头,用于下拉,这个小箭头就可以用伪元素来写)
代码实现0.5px的边框
1. 伪元素+linear-gradient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>实现0.5px的边框1</title>
<style>
* {
margin: 0;
padding: 0;
}
.demo-border {
padding: 20px;
position: relative;
}
.demo-border::after {
position: absolute;
content: '';
left: 0;
bottom: 0px;
height: 1px;
width: 100%;
background: -webkit-linear-gradient(red 50%, transparent 50%);
/* background: -webkit-linear-gradient(to right, red 50%, transparent 50%); */
}
</style>
</head>
<body>
<div class="demo-border"></div>
</body>
</html>
2. 伪元素 + scaleY(0.5)
- 一条边框宽度0.5px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>实现0.5px的边框1</title>
<style>
* {
margin: 0;
padding: 0;
}
.demo-border {
padding: 20px;
position: relative;
}
.demo-border::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: red;
transform: scaleY(.5);
-webkit-transform: scaleY(.5);
}
</style>
</head>
<body>
<div class="demo-border"></div>
</body>
</html>
- 4条边框的宽度均为0.5px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.demo-border {
padding: 20px;
position: relative;
}
.demo-border1 {
padding: 20px;
position: relative;
}
.demo-border::after {
position: absolute;
content: '0.5px';
left: 0;
top: 0;
height: 400px;
width: 400px;
border: 1px solid red;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
border-radius: 10px;
}
.demo-border1::after {
position: absolute;
content: '1px';
left: 0px;
top: 200px;
height: 200px;
width: 200px;
border: 1px solid red;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="demo-border"></div>
<div class="demo-border1"></div>
</body>
</html>