CSS實現鉛筆風格是一種非常受歡迎的技術,在今天的文章中我們將介紹如何使用CSS實現鉛筆風格的效果。
.pen { background-color: #F5F5F5; border: 1px solid #E0E0E0; border-radius: 10px; padding: 20px; } .pen::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pen::after { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 80%; background-color: #333; transform-origin: 100% 0; transform: rotate(-45deg); } .pen p { font-family: 'Lobster', cursive; font-size: 24px; color: #333; letter-spacing: 2px; line-height: 1.5; position: relative; padding-left: 20px; } .pen p::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: #333; } .pen p::after { content: ""; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 100%; height: 2px; background-color: #333; }
首先,我們創建一個外層容器并設置一些基本樣式。然后,我們使用偽元素(::before和::after)來實現鉛筆的形狀和細節。最后,我們將p標簽的字體和間距設置為合適的大小,并使用偽元素為段落添加引導和橫線。