CSS图片实例
本文目录1. 前言2. 普通图片3. 圆角图片4. 缩略图效果5.小结1. 前言上一篇我们详细讲解了如何利用CSS来制作一个好看的按钮。本篇我们来研究下如何用CSS美化图片。2. 普通图片普通情况下我们给图片设置个宽度和高度即可。普通图片brimgsrc1.jpgclassimgbr对应CSS.img{width:400px;height:300px;}此时效果如下比较生硬难言美观3. 圆角图片我们可以通过为图片添加圆角让图片变得不那么生硬虽然是一个小的改变但是效果不错圆角图片brimgsrc1.jpgclassimg img-roundbr对应CSS.img-round{border-radius:16px;}效果如下4. 缩略图效果还可以借助边框、内边距实现一种好看且常用的缩略图效果如下缩略图brimgsrc1.jpgclassimg img-thumbnailbr对应CSS.img-thumbnail{border:1px solid grey;border-radius:16px;padding:4px;}此时效果如下很明显缩略图的方式看起来还是比较大气的。5.小结本节简单的讲解了如何使用CSS美化图片效果虽然简单但比较实用。

相关新闻

Docker部署OpenClaw并接入飞书机器人:Windows实践指南

Docker部署OpenClaw并接入飞书机器人:Windows实践指南

这周我在Windows上把OpenClaw完整跑通了,并且成功接上了飞书机器人,整体链路还算顺。今天就把整套方案整理出来,从Docker环境的准备工作,到docker compose部署OpenClaw,再到飞书开放平台的应用配置和消息联调&#xff…

2026/10/9 3:28:11 阅读更多 →
软件测试技术文件实战:从测试计划到Word排版的完整指南

软件测试技术文件实战:从测试计划到Word排版的完整指南

1. 为什么软件测试的产出物,最后都落在Word上做软件测试这些年,我经手的软件测试技术文件,绝大多数都是Word格式。测试计划、测试用例、缺陷报告、测试总结……不管团队内部平时用什么项目管理工具、缺陷管理平台、在线协作文档,真…

2026/10/9 3:28:11 阅读更多 →
环形链表与快慢指针:从判断有环到定位环入口的数学推导

环形链表与快慢指针:从判断有环到定位环入口的数学推导

如果你在LeetCode上刷到第141题“环形链表”,第一反应大概是:这题有什么难的?三行代码就能写完。可真正在面试里被这道题拦住的人,从来不是写不出“判断有没有环”的代码,而是被追问“为什么快慢指针一定会相遇”时哑口…

2026/10/9 3:28:10 阅读更多 →

最新新闻

Agent-Reach 深度解析:Python 构建 CLI 型 AI Agent 的工具调用与避坑指南

Agent-Reach 深度解析:Python 构建 CLI 型 AI Agent 的工具调用与避坑指南

1. 从"Agent-Reach"这个名字说起:它到底想解决什么问题第一次看到"Agent-Reach"这个项目名,我的直觉是:这大概率是一个围绕 AI Agent 能力边界扩展的工具,而不是又一个"套壳聊天机器人"。原因很简单…

2026/10/9 4:02:30 阅读更多 →
Python随机点名器实战:random模块与Tkinter从命令行到GUI

Python随机点名器实战:random模块与Tkinter从命令行到GUI

太好玩了!用Python实现随机点名器,课堂/会议都能用昨天下午最后一节课,我站在讲台上对着花名册喊了三遍“王磊”都没人应,底下一片窃笑——这小子猫在最后一排打盹儿。那一刻我意识到,传统的按花名册顺序点名&#xff…

2026/10/9 4:02:30 阅读更多 →
Agent-Reach CLI工具实战:Python构建AI Agent外部触达能力

Agent-Reach CLI工具实战:Python构建AI Agent外部触达能力

1. 项目缘起与核心定位第一次看到 Agent-Reach 这个标题,我下意识把它拆成了两个部分:Agent 和 Reach。Agent 在当下的技术语境里几乎等同于“能自主干活的智能体”,而 Reach 这个词很有意思,它既可以理解为“触达”,也…

2026/10/9 4:02:30 阅读更多 →
上周最后一天怎么算?Python、SQL、Shell多语言日期计算实战

上周最后一天怎么算?Python、SQL、Shell多语言日期计算实战

你有没有遇到过这样的需求:做报表统计、任务调度或者数据清洗时,经常要算“上周最后一天”。听起来特别简单,不就是减几天的事嘛,可实际动手时,今天周几、系统时区、跨月月初这些因素混在一起,很容易把人绕…

2026/10/9 4:02:30 阅读更多 →
电商数据分析必修课:从数据获取到合规采集的完整指南

电商数据分析必修课:从数据获取到合规采集的完整指南

做电商数据分析这些年,我最深的一个体会是:真正卡住分析进度的往往不是算法模型,而是数据本身。销售报表要出数,运营要复盘,管理层要决策,结果第一步“数据获取”就出各种幺蛾子——要么字段对不上&#xf…

2026/10/9 4:02:30 阅读更多 →
ASP.NET C# ERP源码二次开发:从部署到改造全流程实战

ASP.NET C# ERP源码二次开发:从部署到改造全流程实战

简介:这是一份面向.NET开发团队的ASP.NET C#大型综合管理系统源码包,定位于大型ERP与全能后台管理系统的项目样板,适合具备一定C#基础、希望直接参考完整工程结构或进行二次开发的中高级开发者。压缩包约52.88MB,以zip格式提供&am…

2026/10/9 4:01:29 阅读更多 →

日新闻

Java时间API实战:LocalDate、Date与ZonedDateTime的转换与避坑指南

Java时间API实战:LocalDate、Date与ZonedDateTime的转换与避坑指南

Java时间API这个话题,隔三差五就会在群里被翻出来讨论一次。上周还有个同事线上处理一个订单超时问题,排查到最后发现是ZonedDateTime序列化后时区丢了,用户在下单当天晚上看到的时间整整差了8个小时。这类问题几乎每个做Java开发的人都遇到过…

2026/10/9 0:00:49 阅读更多 →
EasyTier实践:从NAT穿透到子网代理的异地组网部署与排错

EasyTier实践:从NAT穿透到子网代理的异地组网部署与排错

前几个月我手头有好几台机器需要互相访问:办公室台式机、家里 NAS、还有一台云主机。如果只是偶尔传个文件倒还好,问题是工作场景经常要在几处环境之间来回切换,每次都先登录跳板机再层层代理,实在折腾。我先后试过端口映射、自建…

2026/10/9 0:00:49 阅读更多 →
AI Agent工程实战:从七要素到七个决策点的系统设计指南

AI Agent工程实战:从七要素到七个决策点的系统设计指南

AI Agent 这个词在过去一年里被反复提及,但真正动手搭过一套能跑起来的 Agent 系统的人都知道,从"知道它是什么"到"让它稳定干活"之间隔着一整套工程决策。我前后参与过几个 Agent 项目的落地,从最初用现成框架拼装&…

2026/10/9 0:01:50 阅读更多 →

周新闻

KT148A语音芯片外挂8002D功放的工程实践指南

KT148A语音芯片外挂8002D功放的工程实践指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:32 阅读更多 →
LLC谐振变换器增益公式推导:从FHA等效到完整归一化表达式

LLC谐振变换器增益公式推导:从FHA等效到完整归一化表达式

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:40 阅读更多 →
ARM架构深度解析:从RISC设计理念到交叉编译实战

ARM架构深度解析:从RISC设计理念到交叉编译实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 10:10:36 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 21:13:17 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 13:34:55 阅读更多 →