帶陰影的CSS3圓角立體按鈕

2024-09-05 12:17:12

字體：大中小

供稿：網(wǎng)友

帶陰影的CSS3立體按鈕，而且是圓角的按鈕，請?jiān)诨鸷hrome、Safari瀏覽器下運(yùn)行本效果，同時這也是學(xué)習(xí)CSS3的好范例。

<!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><title>CSS3實(shí)現(xiàn)的立體按鈕</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}a{background-color:#DB5705;border-radius:8px 8px 8px 8px;box-shadow:0 9px 0 #DB1F05,0 9px 25px rgba(0,0,0,0.7);color:#FFFFFF;display:block;font-family:'微軟雅黑';font-size:42px;font-weight:700;margin:100px auto;padding:4px;position:relative;text-align:center;text-decoration:none;transition:all 0.1s ease 0s;width:260px;}a:active{box-shadow:0 3px 0 #DB1F05,0 3px 6px rgba(0,0,0,0.9);position:relative;top:6px;}</style></head><body><p id="hello">Hello OSTools</p>網(wǎng)頁特效<script type="text/javascript">if(document.getElementById('hello')){	document.getElementById('hello').innerHTML='Hello ostools - this was inserted using JavaScript';}</script></body></html>

上一篇：CSS3 3D文字動畫

下一篇：CSS3背景閃爍和圖片縮放動畫效果