正文

HTML5 textarea实现边框阴影效果：掌握简单代码轻松美化文本输入框

/0 浏览量
0702

在网页设计中，美化的文本输入框可以提升用户体验，使其更加美观。HTML5的<textarea>元素是用于多行文本输入的常用控件。通过一些简单的CSS代码，我们可以为<textarea>添加边框阴影效果，从而实现美化。下面，我将详细介绍如何通过简单的代码实现这一效果。

简单的HTML结构

首先，我们需要一个基础的HTML结构，这里以一个简单的文本输入框为例：

<textarea id="myTextarea" placeholder="在此输入文本..."></textarea>

添加CSS样式

接下来，我们将使用CSS为<textarea>元素添加阴影效果。以下是一些简单的CSS样式：

textarea {
  width: 300px;          /* 设置输入框宽度 */
  height: 100px;         /* 设置输入框高度 */
  border: 1px solid #ccc; /* 设置边框样式 */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
  padding: 10px;         /* 设置内边距 */
  font-size: 16px;       /* 设置字体大小 */
  resize: none;          /* 禁止调整大小 */
}

在上面的CSS代码中，我们设置了输入框的宽度、高度、边框样式、阴影效果、内边距和字体大小。box-shadow属性用于添加阴影效果，其中第一个参数2px 2px表示阴影的水平偏移和垂直偏移，第二个参数10px表示阴影的模糊程度，第三个参数rgba(0, 0, 0, 0.1)表示阴影的颜色和透明度。

整合HTML和CSS

将HTML结构和CSS样式整合，我们可以得到以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>textarea边框阴影效果示例</title>
<style>
textarea {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>
<textarea id="myTextarea" placeholder="在此输入文本..."></textarea>
</body>
</html>

这样，我们就完成了为<textarea>添加边框阴影效果的简单示例。当然，您可以根据实际需求调整CSS样式，以达到更佳的视觉效果。希望这篇文章能帮助您轻松美化文本输入框！

-- 展开阅读全文 --