css 边缘发光卡片
时间: 2023-09-03 20:12:34 浏览: 59
要创建一个带有边缘发光效果的卡片,你可以使用CSS中的box-shadow属性。下面是一个示例代码:
```css
.card {
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
```
在上面的代码中,我们创建了一个具有300像素宽度和200像素高度的卡片。使用border-radius属性将边框的角落设置为圆角效果。box-shadow属性用于添加边缘发光效果。该属性接受四个参数:水平偏移量、垂直偏移量、模糊半径和颜色。在示例中,我们将水平和垂直偏移量都设置为0,模糊半径为10像素,并且颜色为淡灰色(rgba(0, 0, 0, 0.2))。
你可以根据需要调整这些值来获得你想要的效果。
相关问题
css 彩虹色发光字体
以下是使用CSS实现彩虹色发光字体的方法:
```css
@keyframes shining {
0% {
text-shadow: 0 0 10px red;
}
14% {
text-shadow: 0 0 10px orange;
}
28% {
text-shadow: 0 0 10px yellow;
}
42% {
text-shadow: 0 0 10px green;
}
57% {
text-shadow: 0 0 10px blue;
}
71% {
text-shadow: 0 0 10px indigo;
}
85% {
text-shadow: 0 0 10px violet;
}
100% {
text-shadow: 0 0 10px red;
}
}
.rainbow-text {
font-size: 24px;
font-family: Arial, sans-serif;
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shining 3s linear infinite;
}
```
在HTML中使用上述CSS类名即可实现彩虹色发光字体效果:
```html
<p class="rainbow-text">Hello, World!</p>
```
css3 发光
要在 CSS3 中实现发光效果,可以使用 box-shadow 属性,设置其值为 0 0 10px #fff(其中 #fff 为发光的颜色)。例如:
```
.box {
box-shadow: 0 0 10px #fff;
}
```
还可以使用 text-shadow 属性给文字添加发光效果。例如:
```
h1 {
text-shadow: 0 0 10px #fff;
}
```