在前端開發中，圖片上傳和裁剪是非常常見的需求，如何通過 CSS 實現圖片上傳和裁剪呢？

首先，我們需要用 input 標簽實現圖片上傳。使用 CSS 布局，我們可以將 input 隱藏起來，然后在頁面上創建一個觸發上傳的按鈕，當用戶點擊按鈕時，觸發 input 的點擊事件，從而實現圖片上傳。

<input type="file" id="upload" style="display:none">
<button id="uploadBtn">上傳圖片</button>
<script>
document.getElementById('uploadBtn').addEventListener('click', function() {
document.getElementById('upload').click();
});
</script>

接下來，我們需要通過 CSS 實現圖片裁剪。可以使用 background-image，background-size 和 background-position 屬性來實現。首先，我們將要顯示的圖片設置為元素背景圖，并將其屬性設置為 cover，這樣圖片就會自動縮放以適應元素大小。接著，使用 background-position 屬性來調整圖片顯示位置，從而實現裁剪效果。

<div class="crop"></div>
.crop {
width: 300px;
height: 300px;
background-image: url('example.jpg');
background-size: cover;
background-position: -50px -50px;
}

最后，我們將上傳的圖片設置為背景，并使用 JavaScript 獲取用戶選擇的圖片并設置為元素的背景。這樣，我們就可以實現完整的圖片上傳和裁剪功能了。

<input type="file" id="upload" style="display:none">
<button id="uploadBtn">上傳圖片</button>
<div class="crop"></div>
.crop {
width: 300px;
height: 300px;
background-size: cover;
background-position: -50px -50px;
}
document.getElementById('upload').addEventListener('change', function() {
var file = this.files[0];
var reader = new FileReader();
reader.onloadend = function() {
var img = new Image();
img.src = reader.result;
img.onload = function() {
document.querySelector('.crop').style.backgroundImage = 'url(' + reader.result + ')';
}
}
reader.readAsDataURL(file);
});

總的來說，使用 CSS 實現圖片上傳和裁剪并不復雜，只需要掌握一些基本的 CSS 屬性和 JavaScript API 就可以了。同時，我們也可以使用一些優秀的第三方庫來簡化開發流程，例如：Cropper.js、vue-cropper、React-Image-Crop 等等。