CSS3實現文字3D效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/text.css">
</head>
<body>
<h2 id="text1">權志龍</h2>
<h2 id="text2">GDRAGON</h2>
</body>
</html>
css程式碼
h2{
font-family: Helvetica, Arial, sans-serif;/*sans-serif就是無襯線字型，是一種通用字型族*/
font-size: 7em;/*放大字型*/
text-align: center;
}
body {
background:#f9f9f9 ;/*#f9f9f9*/
}
#text1 {
font-family: helvetica;
/* text-transform: uppercase;*//*text-transform 屬性控制文字的大小寫 uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。*/
text-align: center;
color: #fefefe;
-webkit-text-shadow: #e7e7e7 3px 5px 0,
#999 4px 6px 3px,
#ccc 8px 11px 10px;
text-shadow: #e7e7e7 3px 5px 0,
#999 4px 6px 3px,
#ccc 8px 11px 10px;
}
#text2 {
background: #999;
color: transparent;
text-shadow: 0px 1px 3px rgba(250,250,250,0.95);
-webkit-background-clip: text;/* background-clip：規定背景的繪製區域*/
-moz-background-clip: text;
background-clip: text;
}