HTML 如何使文本框具有圆角

在本文中，我们将介绍如何使用HTML和CSS来使文本框具有圆角。文本框是一种常用的HTML表单元素，其默认形状为矩形。但通过使用CSS样式，我们可以改变文本框的外观，让它具有圆角。

阅读更多：HTML 教程

使用border-radius属性设置圆角

要使文本框具有圆角，我们可以使用CSS的border-radius属性。border-radius可以设置元素的边框的圆角。该属性可以使用百分比值、像素值或关键字来定义圆角的大小。下面是使用border-radius属性来设置圆角的示例代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type=text] {
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="输入文本">
    </body>
</html>

在上面的示例代码中，我们使用了border-radius属性来设置文本框的圆角为10像素。为了使这个效果生效，我们将该样式应用到input[type=text]选择器中的文本框。

使用CSS框架或库

除了手动设置border-radius属性之外，我们还可以使用一些CSS框架或库来实现文本框的圆角效果。这些框架或库提供了现成的样式和组件，使得文本框的样式更加丰富和自定义性更高。下面是一个使用Bootstrap框架来设置文本框圆角的示例代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <input type="text" class="form-control rounded-pill" placeholder="输入文本">
        </div>
    </body>
</html>

在上面的示例代码中，我们使用了Bootstrap框架提供的rounded-pill类来将文本框的边框样式设置为圆角。

使用CSS框架或库可以方便地实现文本框的圆角效果，并且具有更多样式和组件选择，以满足不同的设计需求。

调整圆角大小

除了使用border-radius属性设置固定大小的圆角之外，我们还可以根据需求调整圆角的大小。通过设置不同的border-radius值，我们可以使圆角的形状更圆润或更尖锐。

下面是一些常见的border-radius值和其效果的示例代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .rounded-10 {
                border-radius: 10px;
            }
            .rounded-50 {
                border-radius: 50%;
            }
            .rounded-100 {
                border-radius: 100%;
            }
            .rounded-50-10 {
                border-radius: 50% / 10px;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="text" class="rounded-10" placeholder="10像素圆角">
        </div>
        <div>
            <input type="text" class="rounded-50" placeholder="50%圆角">
        </div>
        <div>
            <input type="text" class="rounded-100" placeholder="100%圆角">
        </div>
        <div>
            <input type="text" class="rounded-50-10" placeholder="椭圆形">
        </div>
    </body>
</html>