在網頁設計中,圖片的運用可以豐富頁面的內容和美化頁面的效果。而CSS3則提供了更加便捷和靈活的方式來設置圖片的展示效果。
/* 設置圖片圓角 */ img { border-radius: 50%; } /* 設置圖片傾斜 */ img { transform: skew(30deg, 10deg); } /* 設置圖片旋轉 */ img { transform: rotate(45deg); } /* 設置圖片縮放 */ img { transform: scale(1.5); } /* 設置圖片透明度 */ img { opacity: 0.8; } /* 設置圖片模糊度 */ img { filter: blur(5px); } /* 設置圖片灰度 */ img { filter: grayscale(50%); }
通過使用以上代碼,我們可以輕松地設置圖片的圓角、傾斜、旋轉、縮放、透明度、模糊度和灰度等效果,從而使得圖片展示的效果更加狂傲,為網頁帶來更加有魅力的效果。
上一篇css3設置外發光
下一篇koa vue ssr