正文

如何让HTML中的文本框变成椭圆形状？揭秘简单技巧，轻松实现美观设计

/0 浏览量
0809

在网页设计中，文本框是用户输入信息的重要元素。然而，传统的矩形文本框有时会显得单调乏味。为了让网页更加美观，我们可以尝试将文本框设计成椭圆形状。以下是一些简单而实用的技巧，帮助你轻松实现这一效果。

1. 使用CSS伪元素

通过CSS伪元素，我们可以巧妙地利用::before和::after来创建椭圆形状的文本框。以下是一个基本的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .ellipse-input {
    position: relative;
    width: 300px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 20px; /* 半椭圆的半径 */
  }

  .ellipse-input input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
  }

  .ellipse-input::before,
  .ellipse-input::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    z-index: -1;
  }

  .ellipse-input::before {
    top: -20px;
    left: -20px;
  }

  .ellipse-input::after {
    bottom: -20px;
    right: -20px;
  }
</style>
</head>
<body>

<div class="ellipse-input">
  <input type="text" placeholder="Enter text...">
</div>

</body>
</html>

在这个例子中，.ellipse-input 类定义了文本框的基本样式，而 ::before 和 ::after 伪元素则用来创建椭圆的视觉效果。

2. 使用SVG

如果你想要一个更精确的椭圆形状，可以使用SVG来创建一个背景。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .svg-input {
    position: relative;
    width: 300px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 20px;
  }

  .svg-input input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
  }

  .svg-input::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="40" viewBox="0 0 300 40"><circle cx="150" cy="20" r="20" fill="white" /></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
  }
</style>
</head>
<body>

<div class="svg-input">
  <input type="text" placeholder="Enter text...">
</div>

</body>
</html>

在这个例子中，我们使用SVG创建了一个圆形，并将其作为背景应用到文本框上。

3. 使用CSS自定义属性

CSS自定义属性（也称为CSS变量）允许你轻松地调整椭圆的尺寸和颜色。以下是如何使用自定义属性来实现这一效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  :root {
    --ellipse-radius: 20px;
    --ellipse-color: #fff;
  }

  .custom-ellipse-input {
    position: relative;
    width: 300px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  .custom-ellipse-input input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 50%;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--ellipse-color);
  }

  .custom-ellipse-input::after {
    content: '';
    position: absolute;
    width: calc(100% - 2 * var(--ellipse-radius));
    height: calc(100% - 2 * var(--ellipse-radius));
    background-color: var(--ellipse-color);
    border-radius: 50%;
    top: var(--ellipse-radius);
    left: var(--ellipse-radius);
    z-index: -1;
  }
</style>
</head>
<body>

<div class="custom-ellipse-input">
  <input type="text" placeholder="Enter text...">
</div>

</body>
</html>

在这个例子中，我们使用CSS变量来定义椭圆的半径和颜色，使得调整变得非常简单。

通过这些技巧，你可以轻松地将HTML中的文本框设计成椭圆形状，为你的网页增添一份独特的美感。不妨尝试一下，让你的网页设计更加个性化吧！

-- 展开阅读全文 --