圆角方形下载图标

iPhone4 640 × 96040px 88px 98px(88px)Android的设计尺寸：屏幕尺寸指实际的物理尺寸，为屏幕对角线的测量。

为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。

像素（PX）代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。

屏幕密度为解决Android设备碎片化，引入一个概念DP，也就是密度。

指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨率。

为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素= DP * （DPI / 160 ) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。

于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。

典型的设计尺寸• 320dp：一个普通的手机屏幕（240X320，320×480，480X800）• 480dp：一个中间平板电脑像（480×800）• 600dp：7寸平板电脑（600×1024）• 720dp：10寸平板电脑（720×1280，800×1280）对于分辨率繁多的android设备，为了方便原生应用的界面适配，Google按照dpi大小将它们分成了4中模式（MDPI、HDPI、XHDPI和XXHDPI，现在 Android4.3 已经有了XXXHDPI）：屏幕DIP类型: xxhdpi xhdpi hdpi mdpi ldpiICON尺寸：144*144 96*96 72*72 48*48 36*36随便说一下现在安卓设计稿尺寸设定：一般PS新建1080 x 1920的尺寸，也就是对应该安卓的xxhdpi ,所以切图也是放入程序中的xxhdpi文件夹下。

app图标圆角标准在设计一款app时，图标是非常重要的一部分。

一个好的图标可以吸引用户的注意，增加用户对app的好感，甚至可以成为app的标志性符号。

而在设计图标时，圆角是一种常见的设计风格，它能给人一种柔和、温暖的感觉。

因此，设计师们需要了解app图标圆角的标准，以确保设计出符合用户审美和使用习惯的图标。

首先，要确定圆角的半径。

一般来说，圆角的半径越大，图标就会显得越柔和、温暖。

但是半径过大也会导致图标显得过于圆润，失去了一些锐利感，因此设计师需要根据具体的设计需求来确定圆角的半径。

在确定半径时，还需要考虑到图标的大小，过小的图标使用过大的圆角会导致图标细节不清晰，影响用户识别。

其次，要注意圆角的一致性。

在设计图标时，圆角的一致性是非常重要的。

如果图标上的圆角大小不一致，会给人一种不协调的感觉，影响用户的审美体验。

因此，在设计过程中，设计师需要确保图标上的圆角大小、形状都是一致的，这样才能使图标看起来更加整洁、美观。

另外，圆角的使用要符合整体风格。

在设计图标时，圆角的使用要符合app的整体风格。

如果app的整体风格偏向于简约、现代，那么圆角的使用也应该是简约、现代的；如果app的整体风格偏向于可爱、温馨，那么圆角的使用也应该是可爱、温馨的。

因此，在设计图标时，设计师需要考虑到app的整体风格，确保圆角的使用与整体风格相符。

最后，要考虑图标的实际应用场景。

在设计图标时，设计师需要考虑到图标的实际应用场景。

不同的应用场景可能对圆角的要求有所不同，设计师需要根据具体的应用场景来确定图标的圆角设计。

比如，对于需要在小尺寸下清晰展示的图标，圆角的半径可能需要相对较小；而对于需要在大尺寸下展示的图标，圆角的半径可以适当增大，以增加图标的柔和感。

综上所述，设计app图标时，圆角的设计是非常重要的一环。

设计师们需要根据具体的设计需求来确定圆角的半径，确保圆角的一致性，符合整体风格，并考虑图标的实际应用场景，以确保设计出符合用户审美和使用习惯的图标。

css3圆⾓边框圆⾓边框⼀、border-radius属性简介为元素添加圆⾓边框，可以对元素的四个⾓进⾏圆⾓设置（属性不具有继承性）⼆、border-radius定义⽅法border-radius属性有两种定义⽅法：border-radius可以⼀次性对四个⾓设置相同的值(简写属性)，也可对4个⾓分别设置圆⾓样式(单独属设性置)。

（⼀）单独属性设置border-radius：同时设置四个边框的圆⾓样式；border-top-left-radius：设置左上⾓边框的圆⾓样式；border-top-right-radius：设置右上⾓边框的圆⾓样式；border-bottom-left-radius：设置左下⾓边框的圆⾓样式；border-bottom-right-radius：设置右下⾓边框的圆⾓样式；注意【边框的顺序不能打乱，⽐如border-top-left-radius就不可以写成border-left-top-radius 属性是固定的。

】通过实际操作可以看出⼆者表达效果是相同的。

（⼆）简写属性为border-radius设置四个参数,要注意顺序关系1、为属性只设置⼀个值，四个边框的圆⾓都采⽤相同的值border-radius：20px //四个边框圆⾓为20px2、为属性设置两个值，第⼀个值设置左上⾓和右下⾓，第⼆个值设置右上⾓和左下⾓border-radius: 20px 50px //左上⾓和右下⾓20px，右上⾓和左下⾓50px3、为属性设置三个值，第⼀个值设置给左上⾓，第⼆个值设置给右上⾓和左下⾓，第三个值设置给右下⾓border-radius: 20px 50px 5px //左上⾓20px，右上⾓和左下⾓50px，右下⾓5px4、为属性设置四个值，第⼀个值设置给左上⾓，第⼆个值设置给右上⾓，第三个值右下⾓，第四个值左下⾓（按照顺时针⽅向）border-radius: 20px 50px 5px 100px //左上⾓20px，右下⾓50px，右下⾓5px ，左下⾓100px三、分别设置⽔平半径和垂直半径border-radius的语法border-radius: {1-4} length /% / {1-4} length /%;border-radius: 20px 10px 40px / 25px 30pxlength 定义圆⾓的形状；% 以百分⽐定义圆⾓的形状；{1-4} border-radius的参数个数范围为1~4个注释【按此顺序设置每个 radii(半径)的四个值。

纯CSS制作各种各样的⽹页图标（三⾓形、暂停按钮、下载箭头、加号等）三⾓形<div class="box"></div><style>.box{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid transparent;border-right: 50px solid red;}</style>平⾏四边形图标<div class="box"></div><style>.box{width: 50px;height: 50px;margin: 100px auto;background-color: red;transform: skew(-25deg);}</style>暂停按钮<div class="box"></div><style>.box{width: 50px;height: 50px;margin: 100px auto;color: #000;border: 1px solid;border-radius: 50%;outline: 10px solid;outline-offset: -26px;}</style>暂停按钮的实现原理就是边框⽤border，⾥⾯的正⽅形⽤outline。

因为outline有⼀个offset属性可以⽤来设置偏移量，并且是按照⽐例来的。

其实如果再将outline-offset的值设置⼩⼀点，⼀个加好就出来了加号<div class="box"></div><style>.box{width: 50px;height: 50px;margin: 100px auto;color: #000;border: 1px solid;border-radius: 50%;outline: 10px solid;outline-offset: -35px;}</style>如果再将其旋转，就变成了⼀个关闭按钮关闭按钮<div class="box"></div><style>.box{width: 50px;height: 50px;margin: 100px auto;color: #000;border: 1px solid;border-radius: 50%;outline: 10px solid;outline-offset: -35px;transform: rotate(45deg);}汉堡按钮<div class="box"></div><style>.box{width: 50px;height: 0px;margin: 100px auto;box-shadow: 36px 10px 0 3px red,36px 0 0 3px red,36px 20px 0 3px red;}</style>汉堡按钮2：<div class="box"></div><style>.box{width: 30px;height: 3px;margin: 100px auto;padding: 2px 0;border-top: 3px solid red;border-bottom: 3px solid red;background-clip: content-box;background-color: red;}</style>单选按钮因为box-shadow会按⽐例缩放，因此将第⼀个值设置为⽩⾊，然后将第⼆个值设置的⽐第⼀个值⼤就可以了<div class="box"></div><style>.box{width: 30px;height: 30px;margin: 100px auto;background-color: #000;border-radius: 50%;box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;}</style>圆圈中带个⼗字<div class="box"></div><style>.box {width: 30px;height: 30px;margin: 100px auto;background-color: #000;border-radius: 50%;box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;outline: 36px solid #fff;outline-offset: -50px;}</style>⽥型图标<div class="box"></div><style>.box {width: 0;margin: 100px auto;border: 3px solid red;outline: 6px dotted red;outline-offset: 6px;}</style>下载箭头使⽤border制作三⾓形，使⽤box-shadow制作正⽅形，主要⽤了偏移<div class="box"></div><style>.box {width: 0;margin: 100px auto;color: red;border: 8px solid transparent;border-top: 8px solid red;box-shadow: 0 -12px 0 -4px;}</style>书签实现这种效果的原理就是讲三⾓形设置成背景⾊，这样空⼼的三⾓形就出现了<div class="box"></div><style>.box {width: 0;height: 8px;background-color:orange;border: 8px solid transparent;border-bottom: 8px solid #fff;}</style>两个半圆图标这个⽐较简单，就是通过渐变函数来实现，然后来个圆⾓边框<div class="box"></div><style>.box {width: 50px;height: 50px;border-radius: 50%;background-image: linear-gradient(to right,#ccc 50%,#000 50%);}</style>禁⽤图标外圈利⽤圆⾓边框，⾥⾯的竖线⽤渐变来做，然后再⽤旋转属性即可<div class="box"></div><style>.box {width: 50px;height: 50px;border-radius: 50%;border:2px solid #000;background: linear-gradient(to right,#fff 45%,#000 45%,#000 45%,#fff 55%); transform: rotate(40deg);}</style>左右箭头图标既然能做出⼀个三⾓形，那么就可以做出两个三⾓形。

PS如何设计APP图标？PS绘制拟物风格APP图标教程今天我们要做的图标选择制作时间、播放器、天⽓、相机、计算器、相册这些图标，话不多说马上开始今天的教程。

先来看看最后效果教程步骤：⼀、信息图标步骤 01 建⽴⽂档并制作背景新建⽂档，⼤⼩3600*2800px，分辨率72。

新建图层，命名背景，填充前景⾊#f9dfb6，图层模式改为正⽚叠底，不透明度32%。

步骤 02 制作底座新建720*720px的圆⾓矩形，圆⾓半径为200px，命名底座，填充颜⾊#ff7f8c，并添加图层样式来制造体积感。

如图。

步骤 03 制作信息的基本形状新建430*320px的圆⾓矩形，再⽤钢笔⼯具勾出信息图形的⼩尾巴。

将两个图层合并，命名为信息形状，并添加图层样式，如图。

步骤 04 制作省略号新建70*70px的椭圆，复制粘贴，得到3个圆，并且排列对齐，然后合并图层，命名为省略号，调整参数，如图。

步骤 05 完成制作⼆、天⽓图标步骤 01 制作底座新建720*720px的圆⾓矩形，圆⾓半径为200，命名底座，填充颜⾊c6da8f，并添加图层样式来制造体积感，如图。

步骤 02 云朵形状的制作按住shift，⽤椭圆⼯具制作2个240*240px和1个200*200px的圆，并制作⼀个矩形，将四个图形合并，命名为云朵，填充颜⾊#def1f1，如图。

添加图层样式，如图。

⽤椭圆⼯具制作⼀个200*200的圆，填充颜⾊f39800，并命名为太阳。

添加图层样式，如图。

将太阳图层放在云朵图层下⾯，完成制作。

三、时钟图标创作思路：形状⽐较简单，主要制作刻度和时针、分针。

指针通过调整图层样式突出该图标的⽴体感以及光影感，⽤渐变叠加来给指针添加⾼光。

四、相册图标创作思路：制作相册主题图标时，最难的部分就是⽤钢笔⼯具勾出⼭的形状，⼭⼀定要带些弧度才能符合贴切主体图标的风格。

在图形绘制好之后，⼀定要记得做出⾼光、渐变等效果。

五、相机图标相机主题图标形状基本由圆⾓矩形、正六边形和圆形构成，在制作过程中⼀定要注意镜头的明暗变化，并且镜头需要做出投影突出它的⽴体感。

圆角矩形工具的应用技巧圆角矩形工具是PhotoShop软件中常用的一个功能强大的工具，它可以快速创建带有圆角的矩形形状。

在本篇文章中，我们将学习一些圆角矩形工具的应用技巧，帮助您更好地使用PhotoShop软件。

1. 创建圆角矩形：在PhotoShop软件中，选择“圆角矩形工具”(U)，然后在画布上点击并拖动鼠标，可以创建一个带有圆角的矩形形状。

按住Shift键可以创建一个正方形形状，通过调整拖动的距离可以调整矩形的大小。

松开鼠标后，可以通过调整弹出的“圆角半径”选项来改变圆角的大小。

2. 调整圆角的大小：在使用圆角矩形工具创建矩形形状之后，可以通过调整“圆角半径”选项来改变圆角的大小。

较小的数值将产生较小的圆角，较大的数值将产生较大的圆角。

通过试验不同的数值可以找到最适合您需求的圆角大小。

3. 添加/删除圆角：在创建好圆角矩形后，如果想要添加或删除特定角的圆角，可以使用“直接选择工具”(A)选择需要修改的角，然后在“圆角半径”选项中调整圆角大小为0，即可将该角变为直角或完全删除圆角。

4. 圆角图层样式：一旦创建了圆角矩形，可以通过应用图层样式来增强它的外观。

选择相应的图层，然后点击“图层样式”面板的“添加新样式”按钮，在弹出的菜单中选择适当的样式，例如阴影、发光、边框等。

通过调整样式的属性和数值，可以实现更多的效果。

5. 形状属性调整：在PhotoShop软件中，可以对圆角矩形的形状属性进行调整，例如宽度、高度、圆角半径等。

选择相应的形状图层，然后在“属性”面板中调整相应的参数，以达到理想的效果。

当需要创建一系列具有相同属性的圆角矩形时，可以直接复制和粘贴一个形状图层，并调整其属性。

6. 快捷键的使用：在PhotoShop软件中，可以利用一些快捷键操作来提高工作效率。

例如，按住Alt键并拖动已创建的圆角矩形可以复制出一个新的形状；按住Ctrl键并拖动任意点可以对称调整圆角矩形的形状；按住Shift键并点击多个图层可以同时选择这些图层等。

如何在WPS演示中绘制圆角矩形效果图
千万别小看这些绘制几何图形的喔，制作矢量图形，在wps演示中可以用于很多地方的。

以下是店铺为您带来的关于在WPS演示中绘制圆角矩形效果图，希望对您有所帮助。

在WPS演示中绘制圆角矩形效果图
简述
首先用圆角矩形画一个矩形并填充自己喜欢的颜色，接着设置对象格式，将线条颜色选为白色，粗细为2磅，给矩形加上边框。

按住ctrl键拖动图形复制一个为矩形加上阴影，再复制一个设置为双色渐变，OK，立体圆角矩形就完成。

最终效果图：
步骤
1、用自选图形的基本形状里的圆角矩形画一个矩形并填充自己喜欢的颜色。

2、右键图形选择【设置对象格式】，设置格式，将线条颜色选为白色，粗细为2磅，给矩形加上边框，得到如图效果
3、给矩形加上阴影，按住ctrl键拖动图形，复制一个图形
4、新建图层设置颜色为灰色，透明度为30%，调整图层顺序，灰色图形下移一层，调整位置，作为阴影效果
5、再复制一个图形，【设置格式】颜色选择其它效果，设置为双色渐变，设置渐变参数，如图;
6、OK，立体圆角矩形就完成咯!简单操作，易懂易学，马上学习吧!!。

css实现圆角的方法CSS实现圆角的方法有多种，以下是其中一些常用的方法：1. border-radius属性：border-radius属性可以用来设置元素的边框的圆角半径。

可以将其应用于元素的四个角，也可以指定不同的横向和纵向半径来创建椭圆形的圆角效果。

例如，要创建一个具有四个相同大小圆角的矩形元素，可以使用以下CSS样式：```divborder-radius: 20px;```需要注意的是，如果要应用圆角效果的元素有背景色或边框，需要使用透明色将其设置为圆角区域之外的部分。

2. border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius属性：可以分别使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius属性来设置元素的每个角的圆角半径。

例如，要创建一个只有左上角和右下角为圆角的矩形元素，可以使用以下CSS样式：divborder-top-left-radius: 20px;border-bottom-right-radius: 20px;```3.使用单位百分比指定圆角半径：在border-radius属性中，可以使用百分比作为圆角半径的单位。

对于正方形元素，可以使用50%作为圆角半径，以创建一个圆形元素。

例如，要创建一个圆形元素，可以使用以下CSS样式：```divwidth: 200px;height: 200px;border-radius: 50%;```4.使用多个背景图层创建圆角：可以使用多个背景图层来创建具有圆角的元素。

通过设置每个背景图层的圆角半径，可以创建一个具有多个圆角的元素。

例如，要创建一个只有左上角和右下角为圆角的矩形元素，可以使用以下CSS样式：divbackground-image: linear-gradient(red, blue);background-clip: padding-box;padding: 20px;border-radius: 20px;```需要注意的是，在使用多个背景图层时，可以通过设置background-clip属性为padding-box，让背景色只填充到内边距的区域，从而避免背景色溢出圆角区域。

倒圆角大全第一种就是普通倒圆角， 这是最基本的倒圆角， 操作起来也很简单， 就是选择倒圆角命 令，然后选择需要倒圆角的边， 输入半径即可，也可以通过拖动圆角上的小方框来改变半径 的大小。

第二种是可变倒圆角， 也是应用最为频繁的倒圆角。

可变倒圆角顾名思义就是它的半径 可以任意的更改，它与普通倒圆角不同的地方就在倒圆角的设置里面，主要是里面的半径和位置设置。

我们可以在半径下面任意处单击鼠标右键来选择添加半径也可以选取倒圆角上的 小圆圈然后操作同上， 当然位置我们一样可以更改，可以直接更改半径后面的数字，正常情况下，这些数字表示的是比率， 所以其值也就只能在 0和1之间取，另外，我们也可以通过 拖动倒圆角上面的小圆圈来改变其位置。

此外，需要声明的几点是： 时，我们看不到倒圆角上的小圆圈，只能使用前一种方法； 2， 们可以看到当单击右键时会有删除项，可以选择删除不需要的项，有了，可以通过选择成为常数使之变为一个半径值。

沖管67.00图2就是可变倒圆角的设置和效果第三种就是只倒一边， 这种倒圆角看起来与普通倒圆角没什么区别， 但比普通倒圆角灵活多变，特别是在零件和造型设计过程当中，二者主要区别就是在倒圆角的段下面，我们可以选择包括，然后通过拖动圆角上的小方框来改变圆角将倒到什么位置， 但要注意有时半径过大能会导致出错。

1,当只有两个半径值 当有两个以上的半径时，我 但当只有两个半径是就没#半ga 置115.00顶点迹… ■ 67.00 顶点曲:…337.000.50HiS 段选顶融图1就是普通倒圆角的效果2值IPD10-图3就是只倒一边的设置和效果 我们可以比较一下图1和图3中的倒圆角下面我们来讲一讲倒圆角中的过渡第一种也是在默认情况下的过渡一一曲面片过渡首先按住Ctrl 键选择需要倒圆角的三条边，这样所选的三条边就只能是一个设置下的三个参 照，而不是三个设置，输入半径值，然后切换到过渡模式，选择过渡选项，单击倒圆角的交 接处，过渡选项被激活，我们只要单击过渡模式右边的下拉菜单选择曲面片即可。

html实现圆⾓矩形问题：如何通过div+css以及定位来实现圆⾓矩形？解决⽅法概述：内容：⾸先在<body>标签内部⾥添加⼀个⼤层（⼤层⽤来固定整体⼤框架），然后⼤层内包含四个⼩层（四个⼩层⾥分别放四个圆⾓（事先⽤ps做好椭圆形形状，然后⽤切⽚⼯具切图））样式：在<head>标签内部设置的css要有的属性：1.position：relative；2.宽和⾼;3背景颜⾊;4.边框线（⽤来调整四个原⾓的相对位置，调整好后可以将边框线设置删除）在设置⼩层的css时，每个层⾥都要有的属性有：1.position：absolute；2.宽和⾼；3.⽅向属性（left，right，bottom,top）4.background：url（""）no-repeat;(引⼊各个⽅向的圆⾓图⽚)以下是我实现圆⾓矩形的代码：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>圆⾓制作</title><style type=text/css>#p{position:relative;width:400px;height:200px;background:black;margin:auto;}#plefttop{position:absolute;width:50px;height:50px;background:url("images/11.jpg") no-repeat;}#prighttop{position:absolute;width:50px;height:50px;right:-9px;top:0px;background:url("images/22.jpg") no-repeat;}#pleftbottom{position:absolute;width:50px;height:50px;left:0px;bottom:-14px;background:url("images/33.jpg") no-repeat;}#prightbottom{position:absolute;width:50px;height:50px;right:-9px;bottom:-14px;background:url("images/44.jpg") no-repeat;}</style></head><body><div id=p><div id=plefttop></div><div id=prighttop></div><div id=pleftbottom></div><div id=prightbottom></div></div></body></html> 注意：我的代码⾥⽤的css样式是内联式，：内联式，嵌⼊式，外部式。

Figma圆角矩形Figma是一款流行的在线界面设计工具，它提供了许多强大的功能来帮助设计师创建和共享设计稿。

其中之一是Figma的圆角矩形工具，它允许用户创建带有不同圆角半径的矩形形状。

本文将介绍Figma圆角矩形的基本用法，以及如何为它们应用样式和效果。

创建圆角矩形在Figma中，要创建一个圆角矩形，首先选择“矩形”工具。

然后，点击并拖动画布上的鼠标，即可绘制出一个矩形形状。

要确定矩形的尺寸，可以通过查看右侧侧边栏中的“约束”部分。

在“约束”中，可以手动输入矩形的宽度和高度，也可以通过拖动矩形的边缘来调整大小。

为了将矩形变为圆角矩形，需要在右侧侧边栏中的“设计”部分找到“圆角”选项。

在此选项中，可以使用滑块或手动输入来定义圆角矩形的圆角半径。

拖动滑块向右或向左，可以增加或减少圆角的大小。

此外，还可以分别设置每个角的圆角半径。

应用样式和效果Figma不仅允许用户创建圆角矩形，还提供了丰富的样式和效果选项，使设计变得更加丰富多样。

以下是一些常见的样式和效果选项：•填充：可以为圆角矩形添加填充颜色，使其具有不同的背景。

选择圆角矩形，然后在右侧侧边栏的“样式”部分找到“填充”选项。

在此选项中，可以选择颜色，也可以调整透明度和模糊度以实现特定效果。

•边框：可以为圆角矩形添加边框，使其具有不同的外观。

在右侧侧边栏的“样式”部分找到“边框”选项。

在此选项中，可以选择边框的颜色、粗细和样式（如实线、虚线等）。

•阴影：可以为圆角矩形添加阴影效果，使其看起来更加立体。

在右侧侧边栏的“样式”部分找到“效果”选项。

在此选项中，可以选择阴影的颜色、模糊度、偏移量和角度。

•蒙版：可以使用蒙版效果来创建不同形状的圆角矩形。

选择圆角矩形，然后在右侧侧边栏的“样式”部分找到“蒙版”选项。

在此选项中，可以调整蒙版的大小和位置，以实现特定的效果。

共享和协作在Figma中创建的圆角矩形形状可以轻松共享和协作。

通过Figma的共享功能，可以邀请其他人加入项目并共同编辑设计稿。

图标圆角设计理念
图标圆角设计是指在图标的边角处加入圆角的设计方式。

传统的图标设计中，边角通常是直角或者锐角，而圆角设计则是在这种基础上进行改造，使图标的边角变得柔和、圆润。

图标圆角设计有以下几个理念：
1. 美学角度：圆角设计能够给人一种温和、舒适的感觉。

边角的圆润感让人感到亲切，让整个设计更加柔和、自然。

这种设计理念符合人类的审美观念，能够给人带来舒适的视觉体验。

2. 可视性角度：圆角设计能够提高图标的可视性。

一般来说，直角或者锐角的边角在小尺寸的图标中不容易辨认。

而圆角设计能够通过在边角处增加一定的曲线，使得图标在小尺寸下仍然能够清晰可见，增加了用户的识别效率。

3. 豪华感角度：圆角设计常常会被用在一些高端品牌的图标中，因为它能够给人一种豪华、高贵的感觉。

与直角相比，圆角设计更具有优雅的感觉，能够增加品牌形象的高贵度和奢华感。

4. 跳脱创意角度：圆角设计可以让图标更加独特、突出。

在大量直角设计的图标中，加入圆角可以使得图标与众不同，增加其独特性和创意性。

同时，圆角设计也能够给人一种轻松、活泼的感觉，使得图标更加富有活力。

5. 品牌统一角度：圆角设计能够统一品牌形象。

如果一家公司的所有图标都采用了圆角设计，那么这些图标就会具有一致的
风格，形成一种统一的品牌形象。

这也有助于提高用户的识别度和记忆度。

综上所述，图标圆角设计具有美学、可视性、豪华感、跳脱创意和品牌统一等多个方面的优势。

它不仅能够增加图标的美感和可视性，还能够提升品牌形象和用户体验。

因此，在图标设计中采用圆角设计是十分值得推崇和应用的。

CSS实现圆⾓，三⾓，五⾓星，五边形，爱⼼，12⾓星，8⾓星，圆，椭圆，圆圈，⼋卦CSS实现圆⾓，三⾓，五⾓星，五边形，爱⼼，12⾓星，8⾓星，圆，椭圆，圆圈，⼋卦等等新出的html5新增了不少标签，性能更强，原来的很繁琐的功能⼏个标签就能实现，同时CSS3也推出，更是⼀⼤亮点，下⾯是css3的部分⽤法，在此总结⼀下，以供需要的朋友们，总共30个例⼦1.长⽅形#Rectangle{width: 200px;height: 50px;color: white;text-align: center;}2.正⽅形#square{width: 200px;height: 200px;color: white;text-align: center;}3.实⼼圆#perfect-circle{width: 200px;height: 200px;color: white;text-align: center;border-radius: 100px;/*-webkit-border-radius: 100px;*/-moz-border-radius: 100px;}4.圈#circle{width: 200px;height: 200px;color: black;text-align: center;border-radius: 100px;/*-webkit-border-radius: 10px;*//*-moz-border-radius: 100px;*/border:3px red solid;}5.椭圆#ellipse{width: 200px;height: 100px;color: white;text-align: center;/*-webkit-border-radius: 100px/50px;*//*-moz-border-radius: 100px/50px;*/}6.上三⾓#triangle-up{width: 0px;height: 0px;color: white;text-align: center;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;/*-webkit-border-top-left-radius: 50px solid transparent;*/ /*-webkit-border-top-right-radius: 50px solid transparent;*/ /*-webkit-border-bottom-left-radius: 100px solid red;*//*-webkit-border-bottom-right-radius: 100px solid red;*/ }7.下三⾓#triangle-down{width: 0px;height: 0px;color: white;text-align: center;border-top: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;}8.左三⾓#triangle-left{width: 0px;height: 0px;color: white;text-align: center;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}9.右三⾓#triangle-right{width: 0px;height: 0px;color: white;text-align: center;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}10.顶左#triangle-topleft{width: 0px;height: 0px;border-top: 100px solid red;border-right: 100px solid transparent;}#triangle-topright{width: 0px;height: 0px;border-top: 100 solid red;border-left: 100 solid transparent;}12.底左#triangle-bottomleft{width: 0px;height: 0px;border-bottom: 100px solid red; border-right: 100px solid transparent; }13.底右#triangle-bottomright{width: 0px;height: 0px;border-bottom: 100px solid red; border-left: 100px solid transparent; }14.平⾏四边形#parallelogram{width: 200px;height: 150px;margin-left: 30px;-webkit-transform: skew(-30deg);-moz-transform: skew(200deg);-o-transform: skew(200deg);}15.#trapezoid{border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; width: 100px;height: 0px;}16. #star-five{width: 0;height: 0;color: red;margin: 50px 0;position: relative;display: block;border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid red;-moz-transfrom:rotate(35deg);-webkit-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);}#star-five:before{width: 0;border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid red; position: absolute;top: -45px;left: -65px;color: white;display: block;content: "";-moz-transform:rotate(-35deg);-webkit-transform:rotate(-35deg);-ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}#star-five:after{width: 0;height: 0;display: block;position: absolute;color: red;top: 3px;left: -105px;border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid red; content: "";-moz-transform:rotate(-70deg);-webkit-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);}17. #star-six{width: 0;height: 0;border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative;}#star-six:after{width: 0;height: 0;border-top: 100px solid red;border-left: 50px solid transparent; border-right: 50px solid transparent; position: absolute;content: "";top: 30px;left: -50px;}18. #pentagon{width: 54px;position: relative;border-width: 50px 18px 0;border-style: solid;border-color: red transparent;}#pentagon:before{content: "";position: absolute;width: 0;height: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-color: transparent transparent red; }19. #hexagon{width: 100px;height: 55px;position: relative;}#hexagon:before{content: "";position: absolute;top: -25px;left: 0;width: 0;height: ;border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red;}#hexagon:after{content: "";left: 0;width: 0;height: 0;bottom: -25px;position: absolute;border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red;}20. #octagon{width: 100px;height: 100px;position: relative;}#octagon:before{width: 42px;height: 0;top: 0;left: 0;position: absolute;content: "";border-left: 29px solid #eee;border-right: 29px solid #eee;border-bottom: 29px solid red;}#octagon:after{width: 42px;height: 0;left: 0;bottom: 0;position: absolute;content: "";border-left: 29px solid #eee;border-right: 29px solid #eee;border-top: 29px solid red;}21 #heart{width: 100px;height: 90px;position: relative;}#heart:before,#heart:after{top: 0;position: absolute;content: "";-moz-border-radius:50px 50px 0 0; border-radius: 50px 50px 0 0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg); transform:rotate(-45deg);-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;-moz-transform-origin:0 100%;-o-transform-origin:0 100%;tansform-origin:0 100%;}#heart:after{left: 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg); transform:rotate(45deg);-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-o-transform-origin:100% 100%; transform-origin:100% 100%;}22. #infinity{width: 212px;height: 100px;position: relative;}#infinity:before,#infinity:after{width: 60px;height: 60px;top: 0;left: 0;border: 20px solid red;position: absolute;content: "";border-radius: 50px 50px 0 50px;-webkit-border-radius:50px 50px 0 50px; -moz-border-radius:50px 50px 0 50px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);}#infinity:after{left: auto;right: 0;border-radius: 50px 50px 50px 0;-webkit-border-radius:50px 50px 50px 0; -moz-border-radius:50px 50px 50px 0; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}height: 180px;display: block;border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/ }24. #pacman{width: 0;height: 0;border-right: 60px solid transparent;border-left: 60px solid red;border-top: 60px solid red;border-bottom: 60px solid red;border-top-left-radius: 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;}25. #talkbubble{width: 200px;height: 100px;position: relative;border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;}#talkbubble:before{width: 0;height: 0;right: 100%;top: 30px;position: absolute;content: "";border-top: 15px solid transparent;border-right: 30px solid red;border-bottom: 15px solid transparent;}26. #burst-12{width: 80px;height: 80px;position: relative;text-align: center;}#burst-12:before,#burst-12:after{width: 80px;height: 80px;top: 0;left: 0;position: absolute;content: "";}#burst-12:before{transform:rotate(30deg);-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(60deg);-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);}27. #burst-8{width: 80px;height: 80px;text-align: center;position: relative;transform:rotate(20deg);-webkit-transform:rotate(20deg);-ms-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);}#burst-8:before{width: 80px;height: 80px;top: 0;left: 0;position: absolute;content: "";transform:rotate(135deg);-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);}29. #diamond{width: 50px;height: 0;border-style: solid;border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px;position: relative;margin: 20px 0 50px 0;}#diamond:after{width: 0;height: 0;top: 25px;left: -25px;border-style: solid;border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px;position: absolute;content: "";}30. #yin-yang{width: 96px;height: 48px;border-color: red;border-style: solid;border-width: 2px 2px 50px 2px;border-radius: 100%;position: relative;}#yin-yang:before {top: 50%;left: 0;content: "";position: absolute;border: 18px solid red;border-radius: 100%;}#yin-yang:after {width: 12px;height: 12px;top: 50%;left: 50%;border: 18px solid #fff;border-radius:100%;content: "";position: absolute;}⾄此30个例⼦到此结束，不⾜之处还请⼤神多多指正，共同学习进步。

【CSS】CSS画矩形、圆、半圆、弧形、半圆、⼩三⾓、疑问框在⽹页中，常常会⽤到各种Icon，假设⽼是⿇烦设计狮画出来不免有些不好意思，所以有时候我们也能够⽤CSS写出各种简单的形状。

⼀来能够减轻他们的负担，⼆来也能够使⽤CSS替代图⽚。

提⾼载⼊速度。

在⽹页中。

结合CSS能画出来的最主要的形状就是矩形，所以，我们能够在矩形的基础上做出各种变换，得到⾮常多不同的形状。

这次的分享主要⽤到圆⾓、边框、定位等知识点（鉴于IE9以上才⽀持圆⾓，临时不考虑兼容问题）先做⼀些通⽤的基础设置：div {width: 100px;height: 100px;line-height: 100px;text-align: center;margin: 100px;background-color: red;}毫⽆疑问。

结合HTML就能够画出最主要的矩形：<div>矩形</div>效果：以下针对矩形做⼀些变换：圆形：<div class="circle">圆形</div>border-radius圆⾓的四个值按顺序取值分别为：左上、右上、右下、左下。

原理：四个⾓都是圆⾓：四个⾓的取值为50%或为宽和⾼⼀样的值（此处即100px）。

.circle {border-radius: 50%;}半圆：<div class="semi-circle">半圆</div>原理：左上、右上⾓是圆⾓，右下、左下⾓是直⾓：左上⾓、右上⾓的值为宽和⾼⼀样的值。

右下⾓、左下⾓的值不变（等于0）。

另外。

由于还要设置⾼度值为原来⾼度的⼀半才是标准的半圆。

.semi-circle {border-radius: 100px 100px 0 0;height: 50px;}扇形：<div class="sector">扇形</div>原理：左上⾓是圆⾓。