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

2025-05-06 03:35:50

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

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

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

3、然后我们来编写对应的CSS代码<style>body{background:#00AB68;text-align:c髫潋啜缅enter;}#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>

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

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>

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

5、最后我们来看看在游览器中的效果吧

如何实现带有阴影的双CSS边框
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢