html字體陰影
① 做這樣的CSS文字陰影效果,該怎麼做
html"><!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="description"content=""/>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>文字陰影</title>
<style>
div{
background-color:#EBEBEB;
width:500px;
height:100px;
line-height:100px;
color:#E3E1E2;
font-size:40px;
font-weight:bold;
font-family:"ArialBlack",Gadget,sans-serif;
text-shadow:01px1pxrgba(255,255,255,1),
0-1px1pxrgba(0,0,0,.3);
}
</style>
</head>
<body>
<div>Thisisheading</div>
</body>
</html>
效果圖:
大概就是這樣子的,你再調一調就能和你的圖片一樣了,css3文字陰影效果只有支持css3的瀏覽器才能顯示,比如chrome、Firefox等,IE9以下不支持。
② 如何在HTML中給文字加陰影CSS濾鏡。或者JQ/JS的方法都可以。求助!
濾鏡
<style type="text/css">
.shadow{
width:120px;
font-size:12px;
padding:10px;
/*以下屬性作用於firefox */
-moz-box-shadow :3px 3px 4px #ccc; /*-maz- box-shadow:水平方向位移 豎直方向位移 模糊半徑 顏色 */
/*以下屬性為ie 支持*/
*filter : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#cccccc"); /*力度,角度,顏色 */
/*以下只能被safari3瀏覽器支持*/
-webkit-box-shadow :3px 3px 4px #ccc;
/*以下屬性只被Opera到最新的10.53版本支持*/
box-shadow :3px 3px 4px #ccc;
}
</style>
</head>
<body>
<div class="shadow">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidint ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
③ 求html 發光字體和陰影字體的代碼。急。。。。
<p align="center" font-size="20px" style="filter:shadow
(color=#111000,direction=135,strength:3);font-size:20px"><b>影陰效果</b></p>
<p align="center" font-size="20px" style="filter:Blur
(add=1,direction=45,strength=10);font-size:20px"><b>風吹效果</b></p>
<p align="center" font-size="20px"
style="position:relative;width:200;height:50;filter:glow
(color=#9933cc,strength=4);margin-left:4px"><b>高斯模糊字體</b></p>
<p align="center" font-size="20px" style="position:relative;width:100%;filter:glow
(color=ffffff,strength=0) shadow(color=cccccc,direction:135)"><b>3D立體字</b></p>
<p align="center" style="filter:glow(color=red,direction=2)"> <font size="20px"
color="#111111"> <b>發光字體</b></font></p>
④ html怎麼給文字加投影
CSS3的文字陰影—text-shadow
IE中:filter:shadow(Color=顏色值,Direction=數值,Strength=數值)}
.demo{text-shadow:0020pxred;filter:shadow(Color=#0000ff,Direction=10,Strength=10)}
⑤ 如何利用CSS設置文字的陰影效果
可以抄看下php中文網的資料
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>php中文網(php.cn)</title>
<style>
h1
{
text-shadow:5px5px5px#FF0000;
}
</style>
</head>
<body>
<h1>文本陰影效果!</h1>
</body>
</html>
上面有段實例代碼,你看下,希望對你有幫助!
⑥ html 給文字添加陰影
1、設置h3的style以此來添加text-shadow,這個就是文字的陰影了哦。它的參數分別表示陰影的水平版距離,垂直距離以權及模糊程度和陰影的顏色了。
⑦ html裡面的文字有白色的陰影怎麼去掉
兩種方法:第一種,你說的文字顏色是黑色,就直接用#000即可
第二種就是加個text-shadow:none;
⑧ Html/CSS前端如何實現文字邊框陰影
《CSS3文本來陰影自 text-shadow》
結構代碼:
<divclass="h5course">歡迎溝通交流~HTML5學堂</div>
樣式代碼:
html{
background:#000;
}
.h5course{
width:400px;
height:200px;
text-shadow:1px1px0#f96,
-1px-1px0#f96;
background:#ccc;
line-height:200px;
text-align:center;
font-size:30px;
font-family:"微軟雅黑";
}
⑨ css如何消除字內陰影
CSS模擬實現字體內陰影效果。
其實,這只是應用了一些小招數,你看了下面的CSS片段也許就會立即明白是怎麼回事:),而關鍵點就是,用RGBA透明色模擬字體內陰影效果。
body{background:#fff;}
.inset-text{
font-family:Helvetica,Arial,sans-serif;font-weight:bold;font-size:5em;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}
原理很簡單,text-shadow 始終處於字體之下,所以用 text-shadow 的多重陰影先在字體實色之下模擬出內嵌陰影的效果,然後,通過將字體的透明度降低,達到字體內陰影的模擬效果。當然這種模擬是有局限的,比如,背景色和模擬陰影必須相同,不然就穿幫了,呵呵。其次,在不支持RGBA的瀏覽器里,不能發揮作用,而且還必須在RGBA之上添加默認顏色以保證老瀏覽能至少顯示實色:
.inset-text{
font-family:Helvetica,Arial,sans-serif;font-weight:bold;font-size:5em;
color:#09f;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}
最後,如果你選中上面那段示例的文本,可以看到很明顯的模糊。這在之前也以及提到過,因為多重陰影的作用在選中時依然有效,所以為了文本的可讀性,應該將選中時的文本陰影去掉。
-moz-selection{text-shadow:none;}
selection{text-shadow:none;}
望點贊!謝謝!