CSS3中的div劃出效果是一種常見的Web設計技術，它可以使頁面呈現出更加生動和美觀的效果。在本篇文章中，我們將學習如何使用CSS3來實現div劃出的效果。

div {
position: relative;
width: 400px;
height: 300px;
background-color: #ccc;
overflow: hidden;
}
div::before {
content: "";
position: absolute;
top: 0;
left: -400px;
width: 400px;
height: 100%;
background-color: #fff;
transform: skewX(-20deg);
transition: 0.5s;
}
div:hover::before {
left: 0;
}

首先，我們需要在樣式表中定義一個div元素，并給它設置一些基本的屬性，如寬度、高度和背景顏色等。

接著，我們使用偽元素::before來創建div劃出的效果。我們將偽元素定位在div元素的左側，并從左向右擴展，用于覆蓋住div元素的一部分。為了使偽元素呈現出斜的劃出效果，我們使用了CSS3中的transform屬性，并將其設置為skewX(-20deg)。我們還為偽元素添加了一個過渡效果，以便在鼠標懸停在div元素上時能夠有平滑的過渡效果。

最后，我們在樣式表中添加了:hover偽類來使偽元素隨鼠標懸停而向右滑動。這樣就實現了一個簡單而有效的div劃出效果。