如何实现带有阴影的双CSS边框

2024-10-13 10:47:37

1、首先请在你的编辑器里面新建一个Html文件

2、其次编写Html代码，我们这里使用了温庭筠的《南歌子词二首》中的一句经典诗作为我们今天的素材。<divid="box"> 玲珑骰子安红豆，入骨相思知不知。</div>

4、以下是完整代码，拷贝到编辑器即可使用<!DOCTYPEhtml>争犸禀淫<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>带有阴影的双CSS边框</title><style>body{background:#00AB68;text-align:center;}#box{margin:120pxauto;padding:40px;width:350px;font-family:KaiTi;font-size:18px;line-height:30px;border:10pxsolid#009688;box-shadow:00010px#009688;outline:dashed10px#fff;font-weight:bold;color:#fff;}</style></head><body><divid="box">玲珑骰子安红豆，入骨相思知不知。</div></body></html>