[分享]css博客留言板输入框

 CSS博客留言板输入框是一个常见的网站元素，用于接收用户的意见反馈或留言。下面我们来看看如何通过CSS来美化这个输入框。首先，我们需要先定义输入框的样式： input, textarea { dis...

 CSS博客留言板输入框是一个常见的网站元素，用于接收用户的意见反馈或留言。下面我们来看看如何通过CSS来美化这个输入框。
首先，我们需要先定义输入框的样式：

<style>
  input[type="text"], textarea {
    display: block; /*将输入框设置为块级元素*/
    width: 100%; /*设置宽度为100%*/
    padding: 10px; /*设置内边距为10px*/
    border: 2px solid #ccc; /*设置边框为2px实线，颜色为#ccc*/
    border-radius: 4px; /*设置圆角半径为4px*/
    font-size: 16px; /*设置字号为16px*/
    margin-bottom: 20px; /*设置下边距为20px*/
  }
</style> 

以上代码定义了输入框的基本样式，包括宽度、内边距、边框、圆角、字体大小和下边距。
接下来，我们可以进一步美化输入框，例如添加阴影和渐变效果：

<style>
  input[type="text"], textarea {
    /*同上*/
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); /*添加阴影效果*/
    background: linear-gradient(to bottom, #f5f5f5, #fff); /*添加渐变效果*/
    color: #333; /*设置字体颜色为黑色*/
  }
</style> 

以上代码添加了阴影效果和从上到下的渐变效果，使输入框看起来更加立体和柔和。
最后，我们可以设置输入框的焦点状态下的样式：

<style>
  input[type="text"]:focus, textarea:focus {
    outline: none; /*去除默认的虚线边框*/
    border-color: #007aff; /*设置边框颜色为蓝色*/
    box-shadow: 0 0 0 2px #007aff20; /*添加内阴影效果*/
  }
</style> 

以上代码当输入框得到焦点时，会去除默认的虚线边框，并将边框颜色改为蓝色，并添加内阴影效果，更加突出输入框的焦点状态。
综上所述，通过CSS可以轻松地美化博客留言板输入框，增强网站的视觉效果和用户体验。