您当前的位置:首页 > 枫桥随记 > CSS笔记网站首页CSS笔记

纯css样式网页标题添加阴影立体效果

作者:玉龙 来源:css样式 2018-10-26 共有116人围观
文章简介 网页标题样式,添加阴影立体效果,非常不错的纯css样式,能制作出三维立方体效果
网页标题样式,添加阴影立体效果,非常不错的纯cssbj/ target=_blank class=infotextkey>css样式绘制,能制作出三维立方体效果,先看看效果图Xjh玉龙博客 - 恒强制版 - 智能吓数
css样式一Xjh玉龙博客 - 恒强制版 - 智能吓数
<a href=http://www.yulongbk.com target=_blank class=infotextkey>玉龙</a>博客个人博客.jpg

 h4{Xjh玉龙博客 - 恒强制版 - 智能吓数
    text-align:center;Xjh玉龙博客 - 恒强制版 - 智能吓数
    font-size:4em; Xjh玉龙博客 - 恒强制版 - 智能吓数
    color:#9e110a; Xjh玉龙博客 - 恒强制版 - 智能吓数
    text-shadow:2px 2px 0px #fff,4px 4px 0px #cdcdcd;Xjh玉龙博客 - 恒强制版 - 智能吓数
    }Xjh玉龙博客 - 恒强制版 - 智能吓数

css样式二Xjh玉龙博客 - 恒强制版 - 智能吓数
玉龙博客个人博客.jpg

h5{Xjh玉龙博客 - 恒强制版 - 智能吓数
    text-align:center;Xjh玉龙博客 - 恒强制版 - 智能吓数
    font-size:4em;Xjh玉龙博客 - 恒强制版 - 智能吓数
    color:#a5536a; Xjh玉龙博客 - 恒强制版 - 智能吓数
    text-shadow:-2px -1px 0px #fff;Xjh玉龙博客 - 恒强制版 - 智能吓数
    }Xjh玉龙博客 - 恒强制版 - 智能吓数

css样式三Xjh玉龙博客 - 恒强制版 - 智能吓数
玉龙博客个人博客.jpg

h6{Xjh玉龙博客 - 恒强制版 - 智能吓数
    text-align:center;Xjh玉龙博客 - 恒强制版 - 智能吓数
    color:#fff; Xjh玉龙博客 - 恒强制版 - 智能吓数
    font-size:60px;Xjh玉龙博客 - 恒强制版 - 智能吓数
    text-shadow:0 1px 0 #ccc,Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 2px 0 #C9C9C9,Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 3px 0 #bbb, Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 4px 0 #b9b9b9, Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 5px 0 #aaa, Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 6px 1px rgba(0,0,0,.1),Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 0 5px rgba(0,0,0,.1), Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 1px 3px rgba(0,0,0,.3), Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 3px 5px rgba(0,0,0,.2),Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 5px 10px rgba(0,0,0,.25), Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 10px 10px rgba(0,0,0,.2),Xjh玉龙博客 - 恒强制版 - 智能吓数
    0 20px 20px rgba(0,0,0,.15);Xjh玉龙博客 - 恒强制版 - 智能吓数
    }Xjh玉龙博客 - 恒强制版 - 智能吓数

Xjh玉龙博客 - 恒强制版 - 智能吓数
代码网页展示:

玉龙个人博客Xjh玉龙博客 - 恒强制版 - 智能吓数
www.yulongbk.com

写文章不易,如果您觉得文章对您有帮助。
打赏激励下作者吧,谢谢支持!
~(@^_^@)~

微信扫一扫

微信打赏扫一扫

支付宝扫一扫

支付宝打赏扫一扫

文章评论