萌新向wordpress文章装饰用HTML代码

①添加边框

<div style="padding: 40px; border: 5px solid #333333;">
<p><strong>这是加粗的字。</strong><br><br>
这是普通的字。</p>
</div>

◆ 代码说明

padding: 40px;

边框内的留白，把40改小一点，留白就会变窄。

border: 5px solid #333333;

5是边框的粗细，数值改大点就会变粗。

#333333是边框的颜色。

②荧光笔下划线

这段文字是划线的。 这段是普通的文字。

<p><span style="background: linear-gradient(transparent 70%,#fff070 30%);">
这段文字是划线的。</span>
这段是普通的文字。</p>

◆ 代码说明

transparent 80%

黄色上面空白部分的比例。

#fff070 20%

颜色。黄色部分的比例。

把20改大点，黄线就会变粗。

③渐变背景

请输入文本

<p style="padding: 40px; box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .1);">请输入文本</p<p style="padding: 40px; 
background-image: linear-gradient(to right, #eec0c6, #7ee8fa); 
color: #ffffff;
font-weight:bold;">
请输入文本</p>

◆ 代码说明

padding: 40px;

边框内的留白，把40改小一点，留白就会变窄。

linear-gradient(to right, #eec0c6, #7ee8fa)

从左往右。左面的颜色，右面的颜色。

color: #ffffff;

字的颜色。

font-weight:bold;

字体加粗，不想加粗就删了这句。

④渐变字体

请输入文本baishaoxuan.com

<p style="font-size:30px;">
<span style="background-image: linear-gradient(to right, #eec0c6, #7ee8fa); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
font-weight:bold;">请输入文本baishaoxuan.com</span></p>

◆ 代码说明

font-size:30px;

字体大小。

linear-gradient(to right, #eec0c6, #7ee8fa)

从左往右。左面的颜色，右面的颜色。

background-clip: text;

仅文本的部分进行渐变。

text-fill-color: transparent;

试文本颜色变成透明。

font-weight:bold;

字体加粗，不想加粗就删了这句。