网页设计圆角矩形边框（网页怎么设置圆角）

本文目录一览：

• 1、如何用CSS为图片添加精美圆角外边框
• 2、在PS中使用圆角矩形裁剪图像?
• 3、Photoshop制作一个蓝色海洋风格网页模板

如何用CSS为图片添加精美圆角外边框

1、代码很简单，a层为放置内容的层，其width值为300，然后向外以2像素的宽度递减，用一个像素来控制圆角。最外一层要加上background为个属性，目的是要将上、下两线条呈现出来。 这里实现了3像素的圆角边框，b层的数量决定了要实现多少个像素边框。

2、首先根据实现图片的大小制作一个圆角边框。打开PS，新建一空白文档，文档的大小根据需要情况来定，在此小编将其设置为400*400，设置完成后点击”好“按钮。选择工具栏上的”矩形“工具，在属性面板中将其半径设置为”20像素“，然后在绘图区绘制一个圆角矩形。

3、首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的标签中，输入css代码：img { border-radius： 20px}。浏览器运行index.html页面，此时页面插入的图片会自动显示圆角20px的。

4、css圆角实现的方式有很多种，最简单最方便的是使用border-radius属性。或者使用圆角图片。border-radius后面直接接数值。例如border-radius：5px；详细参考：.cn/cssref/pr_border-radius.asp 图片圆角就是事先切除圆角图片，可以制作定高，或者定宽的div。

5、CSS3圆角只需设置一个属性：border-radius（含义是边框半径）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

在PS中使用圆角矩形裁剪图像?

1、打开需要处理的图像。选择“圆角矩形工具”（位于“矩形工具”下方）。在选项栏中设置圆角矩形的半径。在图像上拖动鼠标，绘制出一个圆角矩形。选择“裁剪工具”。在图像上拖动鼠标，选择需要保留的部分。按下“Enter”键，完成裁剪。这样就可以得到一个圆角矩形的图像。

2、打开ps，点击“文件”-“打开”，找到一张保护动物的图片。在工具中点击“圆角矩形工具”，然后绘制一个圆角矩形出来。然后“右键”-“删除化图层”，把保护动物图片放在最顶层，按住alt键创建剪贴蒙版。用“钢笔工具”在左上角绘制一个三角，按住ctrl+回车载入选区。

3、打开电脑后，双击PS的程序进入。进入ps后，通过CTRL+O，双击需要打开的照片。打开照片后，在右侧选择圆角矩形工具的选项。选择完毕后，在上方将填充和描边分别设置为无。选择完毕后，在照片中画出需要裁剪的部分。选择背景图层，按下CTRL键，点击上方的圆角矩形。

4、在 Adobe Photoshop 中，您可以使用矩形工具和椭圆选框工具结合使用，将一个圆角矩形切割成半个圆角矩形。以下是具体步骤： 在 Photoshop 中，选择矩形工具，并在画布上绘制一个圆角矩形。 选择椭圆选框工具，并在画布上绘制一个椭圆选框，以覆盖要保留下来的圆角矩形的一侧。

5、打开你想要裁剪圆角的图片。 使用套索工具（L键快捷键）或选择工具（V键快捷键）选中图片的区域，如果需要裁剪整个图片，可以选择整个画布。 在菜单栏中选择编辑 图像菜单 剪裁，或使用快捷键Ctrl+Shift+X剪裁选中区域。

6、首先在PS中进行打开要操作的图片文件。接着在此页面按键盘上的“ctrl+c”组合键来进行后复制图层，然后在此页面中的左侧的工具栏中点击圆角矩形工具。接着在此页面的上方的设置“半径”和“形状模式”。

Photoshop制作一个蓝色海洋风格网页模板

在这个网页设计教程中，使用的是960网格，所以童学们得先下载一个960网络，然后导入到photoshop软件中。通过编辑画布大小，改变文件的大小为：1600x1500px。（注：宽度可以自由更改，但为了能在宽屏的显示器中也能更好的显示，建议大家还是用1600px）找一张清爽的水图片，导入到photoshop中。

首先要制作一个海报，首先要找好素材，素材网上比较容易找到。素材的图片最好要。高清最佳，这样方便后续操作。将素材一，整合到素材二中，制作一个海报图来。接着我们将素材一和素材二分别拖入到ps操作区域中，注意是分别拖入，而不是放在一个图层文件中。

先看效果图。新建文档1280x1024像素，背景白色，建新层，填充黑色，添加图层样式。效果如下。建新层，画一个白色圆角矩形，添加图层样式。建新层，画一个黑色圆角矩形。添加图层样式。效果如下。