網(wǎng)站導(dǎo)航
- zblogPHP模板zbpkf
- zblog免費(fèi)模板zblogfree
- zblog模板學(xué)習(xí)zblogxuexi
- zblogPHP仿站zbpfang
CSS 三角形對(duì)話框（帶邊框）- :before + :after + border
關(guān)于三角形的各種畫法，之前在文章《純CSS - border繪制三角形（各種角度）》內(nèi)有詳細(xì)的介紹，今天來講的是CSS繪出對(duì)話框和三角帶邊框！真正的三角形畫法雖然重要，但常用程度甚至不如本文介紹的帶邊框三角形，因?yàn)楝F(xiàn)在網(wǎng)頁需要彈出各種信息，比如二維碼，比如聯(lián)系方式等，都需要用到對(duì)話框，這個(gè)框如果使用PS做圖的話也可行，但很浪費(fèi)時(shí)間，css直接實(shí)現(xiàn)的話更靠譜！如上圖所示，代碼如下：<!DOCTYPE html&...
純CSS圖形 - padding圓形/同心圓
之前講述過幾個(gè)使用純CSS制作的圖形，比如三角形《border繪制三角形（各種角度）》三橫線《三橫線(三道杠)padding制作出來》、《border-style:double制作三橫線》今天來分享下上圖所示的使用CSS繪制同心圓，主要使用padding屬性！代碼如下：<style> .box{ width: 100px; height:&n...
純CSS圖形：三橫線(三道杠)padding制作出來
其實(shí)之前已經(jīng)分享過一篇，用純CSS方式實(shí)現(xiàn)三橫線（三道杠）的方法：CSS小技巧:border-style:double制作三橫線具體代碼：{width:120px; height:20px;border-top:60px double;border-bottom:20px solid;}可能比本文實(shí)現(xiàn)的還簡單，但既然學(xué)習(xí)到了padding實(shí)現(xiàn)三橫線，那就看看padding是如何來實(shí)現(xiàn)的吧！如上圖實(shí)現(xiàn)的代碼如...
CSS小技巧:border-style:?double制作三橫線
border-style:double有一個(gè)用途很有意思了，就是可以單純的依靠border制作三橫線！如上圖的代碼：{ width:120px; height:20px; border-top:60px double; border-bottom:20px solid; }再來一個(gè)案例：.double{ width:40px; height:8px; border-top:24px&n...
純CSS - border繪制三角形（各種角度）
我們的網(wǎng)頁因?yàn)?CSS 而呈現(xiàn)千變?nèi)f化的風(fēng)格。這一看似簡單的樣式語言在使用中非常靈活，只要你發(fā)揮創(chuàng)意就能實(shí)現(xiàn)很多比人想象不到的效果。特別是隨著 CSS3 的廣泛使用，更多新奇的 CSS 作品涌現(xiàn)出來。今天給大家?guī)?CSS 三角形繪制方法#triangle-up { width: 0; height: 0; &n...