如果您在網(wǎng)站或博客上使用圖片,那么您可能會想為圖片添加一些樣式來使它看起來更加吸引人。幸運的是,通過使用CSS,您可以輕松地對圖片進行樣式設(shè)置。
img { border: 2px solid black; /* 添加一個2像素的邊框,顏色為黑色 */ border-radius: 50%; /* 將圖片變成一個圓形 */ box-shadow: 2px 2px 5px grey; /* 添加一個灰色陰影 */ }
以上代碼演示了如何通過CSS添加邊框、圓角和陰影等效果。以下是一些其他常用的CSS樣式,可以應(yīng)用于圖像:
/* 更改圖像大小 */ img { width: 50%; /* 圖像寬度設(shè)為頁面寬度的50% */ height: auto; /* 讓高度自適應(yīng)保持比例 */ } /* 圖片滑過效果 */ img:hover { opacity: 0.8; /* 將透明度降低到80% */ } /* 圖像貼紙效果 */ img { position: relative; } img::after { content: "New!"; /* 添加文本 */ display: inline-block; position: absolute; top: -10px; right: -10px; background-color: red; color: white; border-radius: 50%; padding: 5px; } /* 圖像漸變遮罩 */ img { position: relative; } img::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, transparent 0%, black 100%); }
現(xiàn)在,您知道如何給圖片添加CSS樣式了。嘗試使用這些技巧來使您的網(wǎng)站或博客的圖像更加出色。
下一篇mysql 自增量