css发光线条
时间: 2023-07-23 21:17:34 浏览: 50
要在CSS中创建发光线条效果,您可以使用CSS的box-shadow和linear-gradient属性。下面是一个例子,演示如何创建一个在元素顶部和底部产生发光线条效果的样式:
```css
.glow {
background-color: #fff;
box-shadow: 0 0 10px 0 #fff, 0 0 20px 0 #fff, 0 0 30px 0 #fff, 0 0 40px 0 #ff00de, 0 0 70px 0 #ff00de, 0 0 80px 0 #ff00de, 0 0 100px 0 #ff00de, 0 0 150px 0 #ff00de;
height: 200px;
position: relative;
}
.glow:before, .glow:after {
background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #fff, rgba(255, 255, 255, 0.5));
content: "";
height: 2px;
position: absolute;
width: 100%;
}
.glow:before {
top: 0;
}
.glow:after {
bottom: 0;
}
```
这段代码会在.glow元素上创建一个白色背景,并在元素的顶部和底部产生发光线条效果。发光效果通过box-shadow属性实现,线条效果则是通过:before和:after伪元素以及linear-gradient属性创建的。您可以根据需要更改颜色和其他属性来自定义样式。