CSS3文本与盒子阴影效果-优快云博客

本文链接：https://blog.youkuaiyun.com/VVVZCS/article/details/82784541

1，text-shadow

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    p{
      margin: 20px;
      padding: 20px;
      text-shadow: 5px 5px 5px #f40;
    }
  </style>
</head>
<body>
  <p>This is a p label</p>
</body>
</html>

这四个属性分别为水平阴影，垂直阴影，模糊距离，阴影颜色

2，box-shadow

适用于给盒子加阴影

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      margin: 20px;
      padding: 20px;
      width: 100px;
      height: 100px;
      background-color: #f40;
      box-shadow: 5px 5px 5px #000;
    }
  </style>
</head>
<body>
  <div>This is a div label</div>
</body>
</html>

3，text-overflow

指定用户如何显示溢出的内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    p{
      margin: 20px;
      padding: 20px;
      width: 100px;
      height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <p>This is a p labelThis is a p labelThis is a p labelThis is a p labelThis is a p labelThis is a p label</p>
</body>
</html>

4，word-wrap

强制文本换行，会把长文本分割掉

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    p{
      margin: 20px;
      padding: 20px;
      width: 100px;
      height: 100px;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <p>This is a p label This is a p labelXXXXXXX</p>
</body>
</html>