11个可以直接引用的文本框代码
第一个,用直线圈起来。
<div style="padding: 1em 1.5em;margin: 2em 0;border: solid 2px #000000;">
<p>请输入文本</p>
</div>
第二个,很细的两条线
<div style="padding: 1em 1.5em;margin: 2em 0;border: double 4px #ff69b4;">
<p>请输入文本</p>
</div>
第三个,纯色的背景
<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#b0e0e6;color:#000000;">
<p>请输入文本</p>
</div>
第四个,带背景的虚线。
<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#fff0f5;border: dashed 2px #773d50;color:#000000;">
<p>请输入文本</p>
</div>
第五个,点点。
<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#ffffe0;border: dotted 6px #ffa500;color:#000000;">
<p>请输入文本</p>
</div>
第六个,抹茶色书签。
<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#f6faee;border-left: solid 10px #6b8e23;color:#000000;">
<p>请输入文本</p>
</div>
第七个,圆角+背景。
<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#fff0f5;border:1px solid #9370db;color:#000000;border-radius: 10px;">
<p>请输入文本</p>
</div>
第八个,带阴影的框。
<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#f4f9ff;border:1px solid #84c1ff;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);color:#000000;">
<p>请输入文本</p>
</div>
第九个,红底白字。
<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#b22222;color:#ffffff;font-weight:bold;">
<p>请输入文本</p>
</div>
第十个,商务风。
<div style="padding: 1em 1.5em;margin: 2em 0;background: linear-gradient(to bottom, #ffffff, #eeeeee);background: -webkit-linear-gradient(top, #fffff, #eeeeee);border: 1px solid #eeeeee;border-top: 4px solid #00008b;box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;color:#000000;">
<p>请输入文本</p>
</div>
第十一个
副标题:便签
请输入文本
<div style="width: 260px;padding: 15px;margin: 2em auto;background: #f7f092;color: #000;box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform: rotate(2deg);word-break: break-all;">
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: #989898;transform: rotate(-3deg);opacity: 0.1;"> </div>
<p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">标题</p>
<p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">副标题</p><p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">正文</p>
</div>