css怎么制作评论框模板

在网页中添加评论框是很常见的需求之一，而使用CSS制作评论框模板可以让我们更加轻松地实现这个目标。下面我们来看看怎样用CSS制作一个简单的评论框模板。

首先，在HTML文件中添加一个文本框和一个提交按钮。代码如下：

    form>
            textarea id="comment">
    /textarea>
            input type="submit" value="提交">
        /form>

此时我们可以看到一个非常简陋的文本框和按钮，接下来我们就要利用CSS来对其进行美化。

首先，我们为文本框设置一些基本属性：

    #comment {
            width: 300px;
            height: 150px;
            resize: none;
            border: 1px solid #ccc;
            padding: 10px;
            font-size: 16px;
            font-family: Arial, sans-serif;
    }

上面的代码可以让我们设置文本框的宽度、高度、边框、内边距、字体大小和字体样式。

接下来，我们要为提交按钮设置样式：

    input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            font-weight: bold;
            border: none;
            padding: 10px 20px;
            margin-top: 10px;
            cursor: pointer;
            border-radius: 5px;
    }

上面的代码可以让我们设置提交按钮的背景颜色、字体颜色、字体大小、字体粗细、内边距、上外边距、鼠标样式和圆角半径。

最后，我们为整个表单添加一个盒子阴影效果：

    form {
            box-shadow: 0 0 5px rgba(0,0,0,.3);
            padding: 20px;
            border-radius: 5px;
    }
    

这段代码可以让我们给表单添加一个盒子阴影效果，并为其设置内边距和圆角半径。

通过上面的步骤，我们已经成功地使用CSS制作了一个简单的评论框模板。如果你需要更多的样式效果，可以继续对以上CSS代码进行调整。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！