css图片样式代码大全（css图片样式代码大全）

CSS是网页设计中必不可少的一种样式表语言，其中的图片样式更是页面设计中的重要因素。下面介绍一些常见的CSS图片样式代码。

/* 图片圆角 */img {
    border-radius: 50%;
}
/* 图片阴影 */img {
    box-shadow: 2px 2px 5px #888888;
}
/* 图片边框 */img {
    border: 1px solid #CCCCCC;
}
/* 鼠标悬停图片旋转 */img:hover {
    transform: rotate(360deg);
}
/* 图片变灰 */img.grey {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
/* 图片黑白 */img.bw {
    filter: grayscale(100%) brightness(0%);
    -webkit-filter: grayscale(100%) brightness(0%);
}
/* 图片模糊 */img.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}
/* 图片透明度 */img.opacity {
    opacity: 0.5;
}
/* 画廊效果 */.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
}
.gallery img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}
.gallery img:hover {
    transform: scale(1.1);
}
/* 背景图片 */body {
    background-image: url("bg.jpg");
}
/* 响应式图片 */@media screen and (max-width: 600px) {
img {
    max-width: 100%;
}
}
    

以上是一些常见的CSS图片样式代码，可以帮助你更好地掌握网页设计中的图片处理技巧。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！