CSS3笔记1 — 文字阴影、边框阴影、自动换行

CSS阴影效果与自动换行

最新推荐文章于 2022-12-19 17:51:21 发布

原创最新推荐文章于 2022-12-19 17:51:21 发布 · 960 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

html5+css3 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用CSS实现文字阴影和边框阴影效果，包括阴影的位置、模糊度及颜色设置等细节，并展示了如何通过CSS使文本自动换行。

1. 文字阴影

这里写图片描述

CSS:

<style>
  h1 {
    text-shadow: 15px 15px 1px #ccc;
  }
</style>

html:

<body>
  <h1>文字阴影</h1>
</body>

解析：
text-shadow : x y r color;
x: 阴影离开文字的横向距离。
y : 阴影离开文字的纵向距离.
r : 阴影模糊半径。
color : 阴影颜色。

2.边框阴影

这里写图片描述

.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  box-shadow: 10px 20px 10px 5px #ccc;
}

解析：
box-shadow: 10px 20px 10px 5px red;
分别是：X轴左右偏移量、Y轴上下偏移量、阴影羽化大小（值越大越模糊）、阴影大小、阴影颜色、默认是外阴影也可以改为内阴影inset；
普通外阴影：box-shadow: 10px 20px 10px 5px red;
内阴影：box-shadow: 10px 20px 10px 5px red inset;

3.自动换行

html:

<body>
  <p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。</p>
</body>

CSS:

<style>
  p {
    word-break: break-all;
  }
</style>

这里写图片描述