示例:图片边框
感谢 darcyc 的代码! 效果演示:
文本内容 111
文本内容 222
文本内容 222
1:文本内容
2:文本内容
2:文本内容
我们可以看到两个图片边框引用的是不同的 style 效果;
一个是圆形:.gpzy_img {
一个是方形:.my_img {
在末尾加:no-lity
就可以实现点击图片不会放大查看原图了;
示例:<img src='图片链接' width=500 class='no-lity'>
代码更新
最新更新代码(可以让边框大小固定不变,里面的图片保持比例,不会变形!) 感谢 darcyc 大佬的神奇法术! 备份一下(此代码可以替换其他style了,旧Style暂不删除):
<style>
.my_img {
box-shadow: 0px 0px 2px 2px rgb(23 162 184 / 55%);
padding: 6px;
border-radius: 15%;
border-radius: 5%;
height:100px;
width:100px;
object-fit: cover;
}
</style>
下面是老代码,也可以用,舍不得删,留着当做纪念!
<!------------------------------图片边框风格:my_img --------------------------------->
<style>
.my_img {
box-shadow: 0px 0px 2px 2px rgb(23 162 184 / 55%);
padding: 5px;
border-radius: 0% !important;
}
</style>
<!------------------------------图片边框风格:gpzy_img --------------------------------->
<style>
.gpzy_img {
box-shadow: 0px 0px 5px 5px rgb(23 162 184 / 15%);
padding: 1px;
border-radius: 50% !important;
}
</style>
<!------------------------------采用的是 gpzy_img 风格--------------------------------->
<div class='d-flex align-items-center font16 border rounded p-2 text-info bg-light' style='width:700px' class=''>
<img src='https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/11/17/234612_202824_icons8-good-quality.gif' width=60 class="gpzy_img">
<div class='ml-3'>
<strong class='d-inline-block' style='width:5px'></strong> 文本内容 111<br/>
<strong class='d-inline-block' style='width:5px'></strong> 文本内容 222<br/>
</div>
</div></br>
<!------------------------------采用的是 my_img 风格--------------------------------->
<div class='d-flex align-items-center font16 border rounded p-2 text-info bg-light' style='width:700px' class=''>
<img src='https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/11/17/235445_202824_icons8-homer-simpson.gif' width=60 class="my_img">
<div class='ml-3'>
<strong class='d-inline-block' style='width:13px'>1</strong>:文本内容<br/>
<strong class='d-inline-block' style='width:13px'>2</strong>:文本内容<br/>
</div>
</div>