技術(shù)資訊
div圓角和陰影以及鼠標(biāo)放上去白色圖層漸變CSS控制
2013-12-31 12:30:29
隨著CSS3和瀏覽器的升級(jí)，一些原來用圖片做的青島網(wǎng)站設(shè)計(jì)效果，基本都可以替換為css控制了，例如圖層陰影，圖層半透明等等，下面介紹的這一個(gè)效果，就是讓一個(gè)div圖層用圓角顯示，背景帶陰影：
白色圖層漸變：
ul#gallery .pic { width:auto; height:100%; float:left; vertical-align:middle }
ul#gallery .pic a.smallimage { background:#333; /*添加一個(gè)黑色的背景為圖片變暗的效果做鋪墊*/ display:block; width:auto; height:auto;vertical-align:middle}
#bigimage { position:absolute; display:none; /*大圖片的父標(biāo)簽設(shè)置相對(duì)定位并將顯示樣式設(shè)置為隱藏*/ }
陰影：
#bigimage img { width:535px; height:auto; border:8px solid #FFF;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=6);/*ie*/
-moz-box-shadow: 2px 2px 10px #333;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #333;/*safari或chrome*/
box-shadow:2px 2px 10px #333;/*opera或ie9*/
border-radius: 10px;}
最后一個(gè)border-radius屬性為圓角
用這種CSS控制的特效，比用png或者gif圖片制作有著維護(hù)方面、文件簡潔、兼容性廣泛等特點(diǎn)，并且樣式控制也比較自由。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能，海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)？為什么要開發(fā)微信小程序？
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少？
延伸閱讀
- [2012-06-26 09:49:05] 網(wǎng)頁設(shè)計(jì)中的圖層疊加混合模式
- [2012-08-28 09:10:15] 網(wǎng)頁拖動(dòng)圖層的制作
- [2016-09-11 13:47:00] 有趣且相當(dāng)實(shí)用的Photoshop圖層教程
- [2016-09-15 23:49:00] 為什么現(xiàn)在圖標(biāo)設(shè)計(jì)都走起了蘋果“白色icon風(fēng)”？
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島flash網(wǎng)站 網(wǎng)站優(yōu)化 青島高端網(wǎng)站建設(shè) 青島網(wǎng)站建設(shè) 青島黃島、紅島網(wǎng)站建設(shè)公司 網(wǎng)站建設(shè)，企業(yè)網(wǎng)站建設(shè) 微信開發(fā) 官網(wǎng)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì) 集團(tuán)公司網(wǎng)站建設(shè) 膠南網(wǎng)站建設(shè)公司 舒適的界面 高端網(wǎng)站設(shè)計(jì) 手機(jī)端的網(wǎng)站 網(wǎng)站建設(shè)的步驟有哪些 php程序 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 SEO優(yōu)化 微官網(wǎng)帶來的好處 青島好的網(wǎng)站優(yōu)化公司 營銷型網(wǎng)站 力圖數(shù)字科技 微網(wǎng)站 網(wǎng)站的速度 程序開發(fā) 視覺靈感 企業(yè)網(wǎng)站為什么要備案 青島開發(fā)區(qū)建站公司 手機(jī)網(wǎng)站建設(shè) 輪胎網(wǎng)站設(shè)計(jì)
