web前端用hbulider写标题要绿色的,并有文字阴影,6张图片当鼠标经过图片边框显示圆角
时间: 2024-02-13 16:02:04 浏览: 57
对于web前端用HBuilder写标题要绿色的,并有文字阴影,可以通过CSS样式来实现,具体代码如下:
```css
h1 {
color: green; /* 设置标题为绿色 */
text-shadow: 1px 1px 1px #000; /* 设置文字阴影 */
}
```
对于6张图片当鼠标经过图片边框显示圆角,可以通过CSS样式来实现,具体代码如下:
```html
<div class="img-box">
<img src="img1.jpg" alt="图片1">
<img src="img2.jpg" alt="图片2">
<img src="img3.jpg" alt="图片3">
<img src="img4.jpg" alt="图片4">
<img src="img5.jpg" alt="图片5">
<img src="img6.jpg" alt="图片6">
</div>
```
```css
.img-box {
display: flex; /* 设置图片为弹性布局 */
flex-wrap: wrap; /* 设置图片自动换行 */
}
.img-box img {
width: 200px; /* 设置图片宽度 */
height: 200px; /* 设置图片高度 */
margin: 10px; /* 设置图片间距 */
border-radius: 10px; /* 设置图片圆角 */
border: 1px solid transparent; /* 设置图片边框 */
transition: all 0.3s ease-in-out; /* 设置图片过渡效果 */
}
.img-box img:hover {
border-color: green; /* 设置图片边框颜色 */
}
```
以上代码可实现图片显示圆角和鼠标经过图片边框显示圆角效果。
阅读全文