[分享]css3圆角表单

CSS3圆角表单CSS3是一种流行的网页设计语言，它提供了许多强大的样式和特效，其中之一便是圆角表单。在过去，网站表单通常是方形或者直角的，但使用CSS3可以为表单的角落添加圆角，使其看起来更加优美和...

CSS3圆角表单

CSS3是一种流行的网页设计语言，它提供了许多强大的样式和特效，其中之一便是圆角表单。

在过去，网站表单通常是方形或者直角的，但使用CSS3可以为表单的角落添加圆角，使其看起来更加优美和现代化。

下面是一个简单的圆角表单的代码示例：

 <form>
    <label>姓名：</label>
    <input type="text" name="name">
    <br>
    <label>密码：</label>
    <input type="password" name="password">
    <br>
    <input type="submit" value="提交">
  </form> 

为了使表单的角落变为圆角，需要使用CSS3的border-radius属性。这个属性控制着元素的边角形状，我们可以将其设置为一个像素值，也可以使用百分数来指定圆角的半径大小。

下面的CSS代码演示了如何将表单的角落变为圆角：

 input[type=text], input[type=password] {
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: inset 0px 1px 4px rgba(0,0,0,0.2);
  }

  input[type=submit] {
    border-radius: 20px;
    padding: 10px 30px;
    background-color: #008CBA;
    color: #fff;
    border: none;
    box-shadow: none;
  } 

在这个例子中，我们将文本框和密码框的边角设置为10像素，将提交按钮的边角设置为20像素。我们还给表单元素添加了一些其他的样式，如背景色、阴影和边框。

通过这些CSS样式，这个简单的表单看起来更加现代和有趣。