wordpress 页面设置阴影

wordpress 页面设置阴影

1. 文字加阴影

1-0. 模仿如下页面

1
https://www.onlinedown.net/copyright.html

1-1. 效果:

第1行

第2行

第3行

第4行

第5行

第6行

第7行

第8行

第9行

第1行

第2行

第3行

第4行

第5行

第6行

第7行

第8行

第9行

第1行

第2行

第3行

第4行

第5行

第6行

第7行

第8行

第9行

1-2. 显示代码

1
2
<div style="border-radius:5px;margin-top: 10px;margin-bottom: 10px; box-shadow: 0 0 10px #000;">
</div>

2. 图片加阴影

2-1. 效果

2-2. 显示代码

1
<img style="margin-top: 10px;margin-bottom: 10px; box-shadow: 0 0 10px #000;" src="https://pic.bndstone.com/20220222155646.png" />

==============================================================================

1. 使用插件

1
2
3
4
5
6
7
8
9
10
11
shadowbox-js
https://webapproach.net/add-shadowbox-for-images.html
https://blog.csdn.net/ol_beta/article/details/83724870
http://blog.sina.com.cn/s/blog_62d8a2080100n1y1.html

WP Image Borders
https://www.xxside.com/1485.html
https://qince8.com/2122.html

css3(box-shadow)
https://www.cnblogs.com/jessiecaisme/archive/2012/08/29/2662017.html

2. 直接使用代码

1
2
https://wordpress.blog.tw/wordpress-box-shadow/
http://blog.sina.com.cn/s/blog_64caf7be0100no7w.html

Leave a Reply

Your email address will not be published. Required fields are marked *