用css如何製作圓環?
HTML開發中,我們可以用圖片製作圖標,也可以用CSS來生成一些簡單的圖標,比如正方形,三角形,圓形等等。
但可以生成圓環嗎?不能直接生成,但可以通過間接的方法來生成,我們可以通過二個圓來完成。
操作方法
(01)看下我們例子的html代碼,如圖,很簡單,就是一個大的div,包含二個div。<div class="yuan_huan"> <div class="yuan1"></div> <div class="yuan2"></div> </div>
(02)看下css樣式yuan1, yuan2的定義,如圖,主要是通過設置border-radius來讓div顯示成圓形。
(03)先看下現在的顯示效果,就是二個大小不一的圓。
(04)把二個圓重疊起來,組成一個圓環。我們修改下yuan1, yuan2的樣式代碼,如圖,讓二個圓都是絕對定位,position: absolute;並且設置yuan1的z-index: 2; 讓他顯示在大圓的上面。
(05)再加上大div的樣式,如圖,主要是要讓二個圓的位置,是相對這個大div來説的。
(06)現在的效果如圖,還需要調整下小圓的位置。
(07)改下小圓yuan1的樣式代碼,調整顯示位置,主要是設置樣式中的 left, top值,如圖
(08)現在的效果,就是一個圓環了。
(09)把小圓的背景色改成和頁面的背景色一樣,就是一個很標準的圓環了。background-color: lightblue;再看下效果,
-
如何使用Eclipse打開已有工程
Eclipse是一個開發工具,很多人用來編寫PHP,JAVA等程序代碼。在Eclipse裏如何打開一個已有的工程?下面來看下。操作方法(01)首先打開你的Eclipse軟件(02)打開後,點擊菜單欄上的“File"-->“New”(03)在New子菜單,點擊“Project"項(04)在彈出的新建項目窗口,可先選擇項目的類...
-
簡單幾步打造圖片的繪畫玻璃效果
怎麼製作圖片的繪畫玻璃效果呢?下面,就讓小編給大家介紹一下吧。操作方法01首先,我們需要打開我們電腦的ps軟件(鼠標左鍵雙擊桌面上的ps快捷方式或者是鼠標右鍵再選擇打開都是可以的)。02打開ps軟件之後,打開一張圖片。03接着,我們複製背景圖層。04添加高斯模糊濾鏡效...
-
cad怎麼畫粗線
在繪製CAD的時候,粗線是經常會使用到的。那麼,在CAD中怎麼畫粗線,下面一起來看看操作步驟吧。操作方法(01)打開電腦中的CAD軟件。需要先將軟件切換至在CAD經典模式,點擊上方工具欄中的工具。(02)之後,會彈出一個下拉列表,點擊列表中的工作空間--AutoCAD經典。這樣就切換...
-
EXCEL技巧——製作學生成績統計表
怎麼使用excel來製作學生成績的統計表。讓小編教給你操作指南。操作方法(01)首先打開一個工作樣表作為例子。如圖所示:(02)在空白單元格內輸入學生成績統計表標題以及相關類目標題。如圖所示:(03)把源數據按照表內格式進行錄入。如圖所示:(04)在f4單元格內輸入公式:“=sum(C...