1. 程式人生 > >在沒有圖片的情況下用css3實現一個圓形

在沒有圖片的情況下用css3實現一個圓形

        最近研究學習css3發現它的確用很大的用途,以前圓形大部分都是用圖片來實現的,今天用css3實現了一個圓形,

html程式碼如下:

            <div>藍楓 </div>

css程式碼如下:

        * {
    margin:0;
    padding:0;
}
div {
    width:58px;
    height:58px;
    border-radius:29px;
    background:#F00;
    box-shadow:-10px 0 20px rgba(0, 0, 0, 0.2) inset;
    margin:30px 0 0 30px;
    text-align:center;
    line-height:58px;
    color:#fff;
    font-weight:bold;
}

預覽效果:

   

 支援的瀏覽器有:Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+


相關推薦

沒有圖片情況css3實現一個圓形

        最近研究學習css3發現它的確用很大的用途,以前圓形大部分都是用圖片來實現的,今天用css3實現了一個圓形, html程式碼如下:             <div>藍楓 </div> css程式碼如下:         *

CSS3——在網速不好的情況,如何讓一個網站還可以

第一種方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; pa

給定陣列a[0:n-1]試設計一個演算法,在最壞情況[3n/2 -2 ] 次比較找出a[0:n-1]中元素的最大值和最小值;教材2-15

給定陣列a[0:n-1]試設計一個演算法,在最壞情況下用[3n/2 -2 ] 次比較找出a[0:n-1]中元素的最大值和最小值; 解:要求對於陣列用小於【3n/2-2】的比較次數找到兩個最值 可以用陣列第一個元素來初始化max,min 然後遍歷陣列,分別和max,min比較,一遍就可以找

shell實現一個小指令碼,來同來統計自己某個檔案的程式碼,總的程式碼行數,總的註釋量,總的空行量?支援遍歷查詢,支援軟連結查詢

[[email protected] yunwei]# cat sum_code_row_version1.4.sh #!/bin/bash # File Name: sum_code_row.sh # Author: Liwqiang # mail: [email

css3實現頁面背景圖片不重複

也許許多人在做網頁的時候都會遇到過一個這樣的問題,什麼問題呢那就是跟下面這張圖片一樣的問題 出現這樣的問題的原因是因為div的大小大於背景圖片的大小,從而導致了背景圖片的重複,其實在css3中解決像這樣的問題特別簡單隻需要新增一個這樣的樣式即可    background

mysql——在沒有ibdata1檔案的情況*.frm和*.ibd檔案恢復資料庫

昨天同學問我阿里雲上的資料庫被盜了 只留下了一個QQ號是不是被盜了,辛辛苦苦手敲的化學相關的知識庫就這樣沒了;然後告訴我之前保留過兩個檔案(frm和ibd),然後就百度、Google…etc;資料庫恢復成功 哈哈!!! 切記 恢復之前先把備份好的frm和i

css3實現滑鼠移入在原來的層上面顯示另一個層的動畫效果

演示效果       這是當滑鼠移入會在原來的層上顯示另一個層的動畫,我這個頁面裡有很多項都需要用這個效果,之前我想用js來實現這個效果,不過彈出來的層的位置不好固定,特別是頁面裡有太多這個效果,而最麻煩的還是當視窗縮小時彈出的層會亂飄,後來我使用css3動畫來實現,不僅在

Vue實現一個簡單的圖片輪播

本文已收錄至https://github.com/likekk/studyBlog歡迎大家star,共同學習,共同進步。如果文章有錯誤的地方,歡迎大家指出。後期將在將GitHub上規劃前端學習的路線和資源分享。 寫在前面 每一篇文章都希望您有所收穫,每一篇文章都希望您能靜下心來瀏覽、閱讀。每一篇文章

Vue實現一個全選指令

lld http 做了 hbm n) 功能 sin fur sbc 最近用vue做了兩個項目,都需要實現全選反選的功能,兩個項目用了兩種實現方法,第一個項目用vue的computed,第二個項目用指令來實現,用起來,發覺指令更加方便。 第一次做全選的時候是剛開始接觸vue不

Behavior Tree Lua 實現一個最簡行為樹

urn ret pri end put true for 行為樹 一個 1 local SELECTOR = 1 2 local SEQUENCE = 2 3 local CONDITION = 3 4 local ACTION = 4 5 6 loca

java實現一個簡單的單戶登陸功能的思路

get 單用戶 這樣的 簡單的 lock ref 數據庫 清除 一個 引用 所謂“單用戶單賬戶登錄”是指:在同一系統中,一個用戶名不能在兩個地方同時登錄。 我們參照 QQ 實現效果:當某賬號在 A 處登錄後,在未退出的情況下,如果再到 B 處登錄,那麽,系統會擠下 A 處

shell實現一個進度條

clas index nbsp blog str 進度條 進度 while lee #!/bin/bash i=0 str=‘#‘ ch=(‘|‘ ‘\‘ ‘-‘ ‘/‘) index=0 while [ $i -le 25 ] do printf "[%-25s][%

C# 實現一個簡單的 Rest Service 供外部調

message [] operation rem adk www span method title 用 C# 實現一個簡單的 Restful Service 供外部調用,大體總結為4點: The service contract (the methods it o

java實現一個簡易編譯器1-詞法解析入門

new 概念 自加 我們 sta 數字 獲得 () 操作系統 本文對應代碼下載地址為: http://download.csdn.net/detail/tyler_download/9435103 視頻地址: http://v.youku.com/v_show/id_XMT

什麽情況+運算符進行字符串連接比調StringBuffer/StringBuilder對象的append方法連接字符串性能更好?

字符串拼接 build 字符串 字符串連接 操作 重新 運算 運算符 對象存儲 String一旦賦值或實例化後就不可更改,如果賦予新值將會重新開辟內存地址進行存儲。而StringBuffer類使用append和insert等方法改變字符串值時只是在原有對象存儲的內存地址上進

【Web前端】CSS3實現彈幕

font ram hover 字符 才會 命令 .sh left window 初版 用css3來實現彈幕確實比較簡單,只需要設置動畫讓彈幕從屏幕右側移動到屏幕左側即可,一開始是這樣實現的 .danmu { position: fixed; left: 100%

ubuntuexpect實現密碼自動輸入

echo 遠程 shell ## 告訴 linux inux word linux下 每次筆記本一開機啟動,總會連用不著且礙事的觸摸板也一塊啟動。便想寫個腳本,讓電腦啟動時關閉觸摸板。(當然,我想更好的辦法是,修改系統啟動時的加載模塊,讓觸摸板不自動加載,但是目前還不知道用

windowsphp實現svn代碼更新

and 代碼更新 one lose bin col proc 如何 pan windows下的服務器 沒有登錄權限,如何從svn更新代碼 用php頁面,實現更新代碼 $cmd = ‘"C:\Program Files\TortoiseSVN\bin\TortoisePro

php 實現一個視圖組件和模板引擎——基礎

view content 如何實現 目前 內容 復用 tty 結構 有效 只要不是做後端接口開發和一些作為守護進程之類的服務器腳本,大多數時候都是在和瀏覽器打交道,因此合理組織並展現 html 標簽是最為常見的工作。一般大家使用框架時,都會自帶有一套視圖組件和模板引擎。

python實現一個命令行文本編輯器

screen alt 保存 模型 既然 ffffff 圖片 單行 pda “這看起來相當愚蠢”——題記   不過我整個人都很荒誕,何妨呢?貼一張目前的效果圖   看起來很舒服,不是麽?即使一切都是個幌子:光標只能在最後,按一下上下左右就會退出,一行超出75個字符