Div+Css實現邊框陰影效果

原創 aaroncheng 2020-02-21 16:58
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  3. <title>CSS陰影</title>
  4. <style type="text/css">
  5. body {padding: 200px;}
  6. div {border-width: 1px; border-style: solid; padding: 1px;}
  7. .a {background-color: #F3F3F3; border-color: #FBFBFB;}
  8. .b {background-color: #D8D8D8; border-color: #E8E8E8;}
  9. .c {background-color: #FFF; border-color: #BBB; height: 100px;color：#ff0000;}
  10. </style>
  11. </head>
  12. <body>
  13. <div class="a">
  14.   <div class="b">
  15.     <div class="c">邊框爲陰影效果</div>
  16.   </div>
  17. </div>
  18. </body>
  19. </html>


aaroncheng
發佈了65 篇原創文章 · 獲贊 1 · 訪問量 9萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

IE6,IE7,FF自適應高度

#content{    min-height:500px;    height:auto;/*IE7*/    _height:500px;/*IE

aaroncheng 2020-06-17 15:33:09

常用meta標記

<meta name="author" content="AaronCheng,[email protected]" /> <meta name="Copyright" content="www.suson.com.cn,版權所有未經受權請勿

aaroncheng 2020-06-17 15:33:09

標準模式與怪異模式

標準模式與怪異模式 由於歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差異(Quirks mode或者稱爲Compati

梦jenny 2020-07-04 17:33:57

定義標題的最好方法

原文：What is the Best Way to Mark up the Title of a Document? 說明：本文是 《Web Standards Solutions: The Markup and Style Handb

ahong2004 2020-06-26 01:18:27

嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義

（1）如何觸發兩種模式：加入xml頭部聲明，可以觸發IE瀏覽器的Quirks mode，觸發之後，瀏覽器解析方式就和IE5.5一樣，擁有IE5.5一樣的bug和其他問題，行爲（Javascript）也是如此。           （2）I

somnus_ly 2020-06-20 05:26:04

採用web標準開發的好處

1.   節約運營成本 2. 用戶友好性 3.  內容跨平臺的可用性 通過將內容與設計進行分離的方法，可以使信息以較低的成本實現跨平臺的轉換。 4.  加快頁面解析速度 通過實驗測試證明，採用內容與設計分離的結構進行頁面設計，可使

somnus_ly 2020-06-20 05:26:04

firefox圖像創作____ 如何繪圖篇（蒐集整理）

這一篇我們來介紹如何通過canvas標籤來繪製圖形：柵格（The grid）      在我們開始畫圖前，我們先討論下面板的網格或座標。我畫了一個我們

happyheipi 2020-06-20 04:27:35

有關網頁嵌套中百分比大小的真實大小

如下 H T M L 代碼： <body> <div id="container"> <h1>This is a Title</h1> <p>This

happyheipi 2020-06-19 20:17:16

js 顯示你係統的日期和時間，超級簡單

<html><head><title>hello</title><script language="javascript">today=new Date()    document.write("Now time is:",today.g

happyheipi 2020-06-19 20:17:16

IE6,IE7,FF自適應高度

#content{    min-height:500px;    height:auto;/*IE7*/    _height:500px;/*IE

aaroncheng 2020-06-17 15:33:09

常用meta標記

<meta name="author" content="AaronCheng,[email protected]" /> <meta name="Copyright" content="www.suson.com.cn,版權所有未經受權請勿

aaroncheng 2020-06-17 15:33:09

各大主流瀏覽器使用的內核

Trident:IE Geckos:Netscape Navigator, Mozilla Firefox Presto:Opera Webkit:Safari, Chrome

chyshnu 2020-06-11 09:55:30

淺談WEB標準，可訪問性，可用性

web控 2020-02-25 12:54:31

web標準

ALSNEI 2020-02-24 22:33:40

常用div+css佈局

happyheipi 2020-02-24 08:31:22