个人笔记2020 6-5

文字阴影效果

原代码以及效果图如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文字阴影text-shadow</title>
    <style>
        h1{
            
        }
    </style>
</head>
<body>
<h1>文字阴影text-shadow</h1>
</body>
</html>

个人笔记2020 6-5_第1张图片

1.text-shadow属性的使用方法

用法:text-shadow:length length length color
第一个length表示阴影离开文字的横方向距离;
第二个表示离开文字的纵方向距离;
第三个表示阴影模糊半径;
color表示阴影颜色。代码及效果图如下:

<style>
        h1{
            text-shadow: 15px 15px 5px green;
        }
    </style>

个人笔记2020 6-5_第2张图片
若想要多个阴影,阴影参数间用逗号隔开即可,代码及效果如下:

<style>
        h1{
            text-shadow: 15px 15px 5px green,30px 30px 5px red,45px 45px 5px black;
        }
    </style>

个人笔记2020 6-5_第3张图片

使用word-break属性来设置自动换行的方法

你可能感兴趣的:(个人笔记)