ps圆角矩形图片的制作

最新推荐文章于 2025-05-02 15:09:46 发布

macaihong

最新推荐文章于 2025-05-02 15:09:46 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 CSS3 学习笔记咕~~(╯﹏╰)b 文章标签：工具 html5 css 浏览器 float class

本文链接：https://blog.youkuaiyun.com/macaihong/article/details/6880361

学习笔记咕~~(╯﹏╰)b 同时被 2 个专栏收录

16 篇文章

订阅专栏

HTML5 CSS3

3 篇文章

订阅专栏

本文介绍两种实用的图像处理技巧：一是使用PhotoShop去除图片背景的方法，包括选择区域、反选、删除背景及保存透明背景等步骤；二是通过CSS3属性实现网页元素圆角效果的技术。

方法一：

1.打开PhotoShop,并找开要处理的图片;

2.使用工具栏中的"矩形"工具,并对其如下设置:

按此在新窗口打开图片

在写有"注意"字样的地方,这个按钮表示用此工具建立路径,

路径的作用也就是为了我们 [ 3.转换成选区(快捷键:Ctrl+Enter) ] ;

4.快捷键:ctrl+shift+I 作用是:反相选取区域,如图:

按此在新窗口打开图片

5.这时按键盘上的"DEL"键,将图片周边的删去;

6.Ctrl+D取消选区;

7.保存时可保存成:*.GIF或*.PNG这两种格式都可保存成透明的.

方法二：

随着各大主浏览器对HTML5和CSS3的支持，在页面上显示圆角，再也不用再PS了，可也利用CSS3的属性来设置.

例如：

.addNote
{
clear: both;
float: left;
margin: -37px 0 5px 600px;
position:relative;
text-decoration:none;
width:90px;
height:20px;
background:black;
color:White;
border-top-left-radius:9px;
border-top-right-radius:9px;
border-bottom-left-radius:9px;
border-bottom-right-radius:9px;
}