如何用CSS代码做方框形标题效果

1、案例分析：我们要做两个标题边框字，一个就是普通的边框线条与文字所组成的效果，另外一个就是实底的边框字，并且让边框字有着一个非常酷炫的旋转角度。

2、代码实现：两个不同边框样式的声明，两个不同文本字内容的声明。

3、标题边框字一的代码流程：一个边框、一个文字，一个阴影这样的三个元素的样式。<挢旗扦渌;section style="稆糨孝汶;width:20em;margin:1em auto;text-align: center;" id="标题字" > <section class="ipaiban" style="padding: 6px; border: 1px solid blue; color: blue; transform: rotate(360deg); background-color: white;"> <section class="ipaiban" style="border: 1px dashed blue; padding: 10px;"> <p class="wihudong" style="color: blue;"> 在百度经验学习好棒！ </p> </section> </section> <section style="background-image: url(***.png);background-repeat: no-repeat;background-size: 100% auto;width: 20em;height: 3em;margin-top: -1.9em;"></section></section>

4、长标题二文字的效果。旋转角度是通过代码rotate(345deg);实现的。<section style="width:20em;margin:1em auto稆糨孝汶;text-align: center;" id="标题2" > <section class="xhr" style="padding: 6px; color: white; transform: rotate(345deg); background-color: orange;"> <section class="wihudong" style="border: 1px dashed white; padding: 10px; color: white;"> 今天的你是最棒的！ </section> </section> </section>

5、检查一下整个代码的流程，我们运行一下就可以得到完整的标题效果。从两个不同的标题上面，我们可以感受一下这种CSS样式的效果的不同。

6、我们可以通过修改参数来让网页元素的内容与效果更丰富。<section style="width:10em;margin:1em auto;text-align: center;" id="标题2" > <section class="xhr" style="padding: 3px; color: white; transform: rotate(345deg); background-color: orange;"> <section class="wihudong" style="border: 2px dashed white; padding: 3px; color: white;"> 天天快乐！ </section> </section>