CSS 分享：图片添加边框阴影

经验分享
,
1

想实现图片边框有阴影 , 但是社区中没有找到对应的教程 , 但搜索过程中发现有自定义 “css代码片段” 的功能 , 所以试了试 , 具体如下:

1 css代码片段文件存放位置

存放在目录 .obsidian\snippets 下

在该目录下新建一个txt文件 , 把名字修改为 “pictureBorder.css”

使用vscode打开 (没有用记事本打开也行) , 然后再其中输入代码就行

2 代码部分

2.1 阴影代码

在文件中输入以下代码 :

img {
    -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); 
    filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
}

然后保存

2.2 边框代码

文件中输入 :

img{
    border-style: solid;  /*图片边框: 实线*/
    border-width: 1px;  /*边框宽度: 0.5px*/
}

然后保存

注 : 阴影代码在电脑端效果还行 , 但是在手机端看起来就不美观了 , 所以我采用了实线边框的效果 , 看起来很不错

3 obsidian中打开代码片段

  1. 打开obsidian软件
  2. 点击左下角 “:gear:”
  3. 点击 “外观”
  4. 拉到最底下 , 找到 “css 代码片段” 选项 , 这个选项下面就是我们自定义的css代码片段了
  5. 找到并打开下面的 “pictureBorder”
6 个赞