CSS3 text-shadow实现文字阴影效果

2024-07-11 08:35:21

字体：大中小

来源：转载

供稿：网友

CSS3设置文字阴影效果，对文字字体设置阴影效果，采用text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。

CSS3单词与语法

CSS3单词： text-shadow

语法结构：text-shadow: 5px 2px 6px black;

5px 代表着：阴影距离文字左5px显示
2px 代表着：阴影距离文字上2px显示
6px 代表着：阴影大小范围
black 代表着：阴影颜色为黑色

例子：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .All-orange {
        font: normal 14px 微软雅黑,sans-serif;
        max-width: auto;
        max-height: auto;
        background-color: #f8f8f8;
        padding: 30px 30px 20px 30px;
        color: #666;
        border-radius: 5px
    }
    .All-orange h1 {
        font: normal 32px 微软雅黑,sans-serif;
        padding: 20px 0 20px 40px;
        display: block;
        margin: -30px -30px 10px -30px;
        color: #FFF;
        background-color: #0CF;
        border-radius: 5px;
        text-shadow:5px 2px 6px #000;
        box-shadow: 5px 2px 6px #000;
    }
    .All-orange img {
        float: left
    }