CSS 來布局圖片

實例
圓角圖片:
img {
    border-radius: 8px;
}

實例
橢圓形圖片:
img {
    border-radius: 50%;
}

我們使用 border 屬性來創建縮略圖。

實例
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

實例
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}
a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

實例
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}
@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

本實例演示了如何結合 CSS 和 JavaScript 來一起渲染圖片。

首先，我們使用 CSS 來創建 modal 窗口 (對話框), 默認是隱藏的。

然后，我們使用 JavaScript 來顯示模態窗口，當我們點擊圖片時，圖片會在彈出的窗口中顯示：

實例
// 獲取模態窗口
var modal = document.getElementById('myModal');
// 獲取圖片模態框，alt 屬性作為圖片彈出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}
// Get the  element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on  (x), close the modal
span.onclick = function() { 
    modal.style.display = "none";
}

原文地址： https://www.linuxprobe.com/css-for-layout.html