CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字體）

時間 2019-12-07

標籤 css3 css text shadow box 字體欄目 CSS 简体版

原文原文鏈接

2016年2月26日我的博客文章--遷移到segmentfaultcss

（1）text-shadow(文本陰影)html

在介紹css3:text-shadow文本陰影以前，咱們先來看看用它都能實現什麼效果：css3

沒錯文本的陰影的效果很強大，接下來咱們就一塊兒開始學習吧.segmentfault

語法：text-shadow：none | length{2,3} color瀏覽器

默認值：none學習

取值：字體

none:無陰影spa

第1個長度值：陰影水平偏移值。可爲負值code

第2個長度值：陰影垂直偏移值。可爲負值htm

第3個長度值：可選，陰影模糊值。不容許負值

color：設置陰影的顏色

說明:能夠設定多組效果，每組參數值以逗號分隔

text-shadow:水平偏移量垂直偏移量陰影模糊值顏色（rgba）,

水平偏移量  垂直偏移量 陰影模糊值  顏色（rgba）,
        水平偏移量  垂直偏移量 陰影模糊值  顏色（rgba）

注意：(1)使用空格分開不一樣屬性值 (2)使用逗號分開不一樣陰影屬性

<html>
<head>
<meta charset="utf-8">
<title>字體</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="stylesheet" href="reset.css">-->
<style>
body{font-family:"微軟雅黑",Arail,Tabhoma; }
p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
p:nth-child(2){
    background: #000; color: #fff; 
    text-shadow:
    0 0 3px rgba(229,0,245,1),
    0 0 6px rgba(229,0,245,0.9),
    0 0 8px rgba(229,0,245,0.9),
    0 0 14px rgba(229,0,245,0.9),
    0 0 22px rgba(229,0,245,0.7),
    0 0 28px rgba(229,0,245,0.7),
    0 0 36px rgba(229,0,245,0.6),
    0 0 48px rgba(229,0,245,0.5),
    0 0 54px rgba(229,0,245,0.3),
    0 0 68px rgba(229,0,245,0.1);}
p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
</style>
</head>
<body>
    <p>Beautiful Text</p>
    <p>Beautiful Text</p>
    <p>Beautiful Text</p>
</body>
</html>

在瀏覽器上展現效果如圖所示：

（2）box-shadow（盒陰影）

由於box-shadow與text-shadow用法幾乎相同只是box-shadow與文本陰影相比，盒陰影多了一個屬性值——陰影外延值（第四個值）

語法：box-shadow：none | length{2,4} color默認值：none

取值：

none：無陰影

第1個長度值：陰影水平偏移值。可爲負值

第2個長度值：陰影垂直偏移值。可爲負值

第3個長度值：可選，陰影模糊值。不容許負值

第4個長度值：可選，陰影外延值。不容許負值

color：設置陰影的顏色。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字體</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="stylesheet" href="reset.css">-->
<style>
body{font-family:"微軟雅黑",Arail,Tabhoma; }
p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
p:nth-child(2){
    background: #000; color: #fff; 
    text-shadow:
    0 0 3px rgba(229,0,245,1),
    0 0 6px rgba(229,0,245,0.9),
    0 0 8px rgba(229,0,245,0.9),
    0 0 14px rgba(229,0,245,0.9),
    0 0 22px rgba(229,0,245,0.7),
    0 0 28px rgba(229,0,245,0.7),
    0 0 36px rgba(229,0,245,0.6),
    0 0 48px rgba(229,0,245,0.5),
    0 0 54px rgba(229,0,245,0.3),
    0 0 68px rgba(229,0,245,0.1);}
p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
 
div{ float:left; margin:100px; width:400px; height:300px; font-size: 20px; line-height: 300px; text-align: center; }
.d1{box-shadow:0px 0px 50px 50px rgba(153,153,238,1);}
.d2{box-shadow:50px 0px 50px 50px rgba(153,153,238,1);}
.d3{box-shadow:-50px 0px 50px 0px rgba(153,153,238,1);}
</style>
</head>
<body>
    <p>Beautiful Text</p>
    <p>Beautiful Text</p>
    <p>Beautiful Text</p>
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。