css3實現3D字體帶陰影的效果-css教學-PHP中文網

首頁

web前端

css教學

css3實現3D字體帶陰影的效果

不言

Jun 28, 2018 pm 03:06 PM

css3 字體陰影

這篇文章主要介紹了關於css3實現3D字體帶陰影的效果，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

3D字體而且還帶有陰影，這種效果想必大家只有認為一些高級的作圖工具才可以實現的吧，css3的出現讓這一切看似不可能的實現成為可能，接下來為大家介紹下3D字體帶陰影效果的實現步驟，有興趣的你可不要錯過了哈

效果圖如下：

原始碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> CSSReX | Drop Shadow with CSS3 </title> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
</head> 
<body> 
<p id="wrapper"> 
<h1>CSSReX</h1> 
<p>任何的异常都是Throwable类，并且在它之下包含两个字类Error / Exception，而Error仅在当在Java虚拟机中发生动态连接失败或其它的定位失败的时候，Java虚拟机抛出一个Error对象。典型的简易程序不捕捉或抛出Errors对象，你可能永远不会碰到需要实例化Error的应用，那就让我们关心一下Exception。 
Unchecked Exception.：包括 Error与RuntimeException. 这类异常都是RuntimeException的子类。 
Checked Exception:除了Error与RuntimeException，其他剩下的异常. 这类异常都是Exception的子类 。在编译时在语法上必须处理的异常，因此必须在语法上以try..catch加以处理；</p> 
</p><!-- /wrapper --> 
</body> 
</html>

登入後複製

style.css：

body{ 
background:#d5d5d5; 
} 
#wrapper{ 
width:960px; 
min-height:500px; 
padding:50px 10px 0 10px; 
margin:0 auto; 
text-align:center; 
} 
#wrapper h1{ 
font:normal 60pt Arial; 
color:#FFFFFF; 
text-shadow: 0 1px 0 #ccc, 
0 2px 0 #c9c9c9, 
0 3px 0 #bbb, 
0 4px 0 #b9b9b9, 
0 5px 0 #aaa, 
0 6px 1px rgba(0,0,0,.1), 
0 0 5px rgba(0,0,0,.1), 
0 1px 3px rgba(0,0,0,.3), 
0 3px 5px rgba(0,0,0,.2), 
0 5px 10px rgba(0,0,0,.25), 
0 10px 10px rgba(0,0,0,.2), 
0 20px 20px rgba(0,0,0,.15); 
} 
#wrapper p{ 
font:normal 40pt Arial; 
color:#FFFFFF; 
text-shadow: 0 1px 0 #ccc, 
0 2px 0 #c9c9c9, 
0 3px 0 #bbb, 
0 4px 0 #b9b9b9, 
0 5px 0 #aaa, 
0 6px 1px rgba(0,0,0,.1), 
0 0 5px rgba(0,0,0,.1), 
0 1px 3px rgba(0,0,0,.3), 
0 3px 5px rgba(0,0,0,.2), 
0 5px 10px rgba(0,0,0,.25), 
0 10px 10px rgba(0,0,0,.2), 
0 20px 20px rgba(0,0,0,.15); 
}

登入後複製

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

熱AI工具

熱工具

熱門話題

Java教學

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1276

C# 教程

1256

Related knowledge

win10字型資料夾路徑詳情 Jan 03, 2024 pm 08:37 PM

在輸入文字的時候很多的小夥伴都喜歡加入自己喜愛的個性字體，但是不知道win10系統的字體資料夾路徑在哪而沒法加入字體，下面就為大家介紹一下具體的資料夾路徑。 win10字型資料夾路徑：1、點選桌面的「此電腦」。 2、進入系統盤C盤。 3.點選「windows」資料夾。 4、下拉找到「Fonts」資料夾。 5、即可進入字體庫。還有其他問題的朋友可以看看了解更多有關win10字體常見的問題~

蘋果手機outlook怎麼更改字體 Mar 08, 2024 pm 04:46 PM

蘋果手機outlook怎麼更改字體呢，先打開outlook軟體，在介面點選左上角的檔案。可以依照自己的喜好進行設定字體，設定完成之後，點選確定按鈕即可。讓我們一起來看看吧！蘋果手機outlook怎麼更改字體1、開啟outlook軟體，在介面點選左上角的「檔案」選項。 2、在出現的清單中，找到「選項」並點擊進入。 3、在選項清單的左側，點選「郵件」。 4、接著，選擇「信紙和字型」。 5.如果想要設定新郵件、回覆郵件或撰寫中的字體，點選對應選項進入設定。 6.依個人喜好對字體進行設置，設定完成後，點選確

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

調整 Windows 11 中記事本字型、樣式和大小的方法 Sep 23, 2023 pm 11:25 PM

許多用戶希望在Windows11上的記事本中更改字體，因為預設字體對他們來說太小或難以閱讀。更改字體非常簡單快捷，在本指南中，我們將向您展示如何自訂記事本並根據需要更改字體。 Windows11記事本預設使用什麼字型？至於預設字體選項，記事本使用Consolas字體，預設字體大小設定為11像素。如何在Windows11中變更記事本字體大小和樣式？使用記事本中的「編輯」選單點選搜尋按鈕並鍵入記事本。從結果清單中選擇記事本。在記事本中，按一下「編輯」選單，然後選擇「字型」。現在，您應該在左窗格中看到設

如何解決win11字體模糊問題 Jan 13, 2024 pm 09:00 PM

有的朋友在更新完win11系統後，發現自己的win11字體模糊不清，使用起來非常的難受，這可能是由於系統版本bug導致，也可能是我們開啟了特殊效果，下面就跟著小編一起來看看該怎麼解決吧。 win11字體模糊不清：方法一：1、先右鍵此電腦，開啟「屬性」2、接著進入相關連結中的「進階系統設定」3、然後點選效能中的「設定」開啟。 4.在「視覺效果」下勾選「調整為最佳效能」並點選「確定」儲存即可。方法二：1、右鍵桌面空白處，開啟「顯示設定」2、點選縮放和佈局下的「縮放」3、再點擊進入相關設定下的「文字大

小米11字型怎麼改_小米11更換字型方法 Mar 25, 2024 pm 07:26 PM

1.開啟手機設置，點選【顯示】。 2、點選【字體】。 3.選擇自己喜歡的字體或點選【更多字體】下載應用程式即可。

vivo手機字體怎麼變大在哪設定 Feb 24, 2024 pm 06:16 PM

vivo手機字體怎麼變大在哪設定?在vivo手機裡是可以把字體變大，但是多數的用戶不知道如何設置vivo手機字體，接下來就是小編為用戶帶來的vivo手機字體怎麼變大設置方法圖文教程，有興趣的用戶快來一起看看吧！ vivo手機使用教學vivo手機字體怎麼變大在哪設定1、先開啟vivo手機中的【設定】功能點選;2、接著跳到設定的介面，找到其中的【顯示與亮度】功能;3、然後到達下圖的頁面，點選【字體大小與粗細】服務;4、最後滑動下圖的橫線調整字體的大小。

Win11字型安裝方法詳細解釋 Dec 27, 2023 pm 05:16 PM

有的朋友在安裝win11字體後，找不到自己的字體安裝在哪裡了，因此提出了win11字體安裝位置的問題，其實我們可以進入個性化中的字體管理，就可以找到字體安裝的位置了，下面一起來看看吧。 win11字型安裝位置：1.先右鍵桌面空白處，開啟「個人化」設定。 2、接著進入其中的「字型」安裝管理設定。 3、在其中找到你想要的字體進入。 4.如果找不到，也可以直接在上方搜尋。 5.進入字體後，在元資料下的「字型檔」就可以看到win11字型安裝位置了。 6.如果我們想要卸載字體，那麼點擊這裡的卸載即可。

See all articles

css3實現3D字體帶陰影的效果

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題