修改文本样式

image.png

1 一般字体样式

强大的工具： https://html-css-js.com/css/generator/font/

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>css3攻略</title>
  9.     <link rel="stylesheet" href="style/style.css">
  10. </head>
  12. <body>
  13.     <div id="demo-font">
  14.         Grumpy Wizards Make Toxic Brew For The Evil Queen And Jack
  15.     </div>
  16. </body>
  18. </html>

style.css

#demo-font {
    font-family: Impact, Charcoal, sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    word-spacing: 1px;
    color: #FF1358;
    font-weight: 400;
    text-decoration: underline solid rgb(68, 68, 68);
    font-style: normal;
    font-variant: normal;
    text-transform: capitalize;
}

image.png

2 带阴影的字体样式

强大的工具： https://html-css-js.com/css/generator/text-shadow/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <div id="demo-font">
        Grumpy Wizards Make Toxic Brew For The Evil Queen And Jack
    </div>
</body>

</html>

style.css

#demo-font {
    font-family: Impact, Charcoal, sans-serif;
    font-size: 29px;
    letter-spacing: 1px;
    word-spacing: 1px;
    color: #FF1358;
    font-weight: 400;
    text-decoration: underline solid rgb(68, 68, 68);
    font-style: normal;
    font-variant: normal;
    text-transform: capitalize;
    text-shadow: 14px 13px 4px rgba(17,163,228,0.88);
}

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <span id="demotext">Edit this text</span>
</body>

</html>

style.css

#demotext {
    font-size: 40px;
    color: #FFFFFF;
    background: #232323;
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
    color: #FFFFFF;
    background: #232323;
}

image.png

3 设置内外边距

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <div class="my-border">
        内外边距
    </div>
</body>

</html>

style.css

.my-border {
    width: 200px;
    height: 100px;
    border: 1px solid red;
    margin: 10px 20px 30px 40px;
    padding: 10px 20px 30px 40px;
}

image.png
image.png