精华内容
下载资源
问答
  • 自定义的圆角矩形

    2017-06-23 21:38:24
    自己自定义的圆角矩形
  • 圆角矩形

    2019-11-08 01:06:59
    今天要说的是圆角矩形 语法规则 border-radius: 左上右上右下左下; head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

    今天要说的是圆角矩形
    语法规则
    border-radius: 左上右上右下左下;

    head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>圆角矩形</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                border:1px solid #f00;
            }
            div:nth-child(1) {
                /*border-radius: 左上右上 右下 左下*/
                border-radius: 10px 20px 30px 40px;
            }
            div:nth-child(2) {
                /*border-radius: 左上右上 右下 左下*/
                border-radius: 20px;
            }
            div:nth-child(3) {
                /*就让左上 右下变化*/
                border-radius: 20px 0px 20px 0px;
            }
            div:nth-child(4) {
                /* 想让这个div变成原型
                如何实现圆形
                1 当前元素的宽度跟高度是一样的
                也就是说这个元素是一个真放行
                2 就是用border-radius 这个属性
                那么这个属性的值等一宽高的一半*/
                border-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>
    

    一开始的盒子

    在这里插入图片描述
    给盒子的左上右上 右下 左下角分别设置以后 border-radius: 10px 20px 30px 40px;
    在这里插入图片描述
    还设置了一个圆

    如何实现圆形
    1 当前元素的宽度跟高度是一样的
    也就是说这个元素是一个真放行
    2 就是用border-radius 这个属性
    那么这个属性的值等一宽高的一半

    在这里插入图片描述
    有了圆形就可以有半圆:

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div.left{
                height: 100px;
                width: 50px;
                background-color: #99ddaa;
                /*
                左半圆
                */
                border-radius: 50px 0px 0px 50px;
            }
            div.right{
                height: 100px;
                width: 50px;
                background-color: darkblue;
                /*
                右半园s
                */
                border-radius: 0px 50px 50px 0px;
            }
            div.up {
                height: 50px;
                width: 100px;
                background-color: darkblue;
                border-radius:50px 50px 0px 0px;
            }
            div.bottom {
                height: 50px;
                width: 100px;
                background-color: darkblue;
                border-radius: 0px 0px 50px 50px;
            }
    
        </style>
    </head>
    <body>
        <div class="left"></div>
        <hr>
        <div class="right"></div>
        <hr/>
        <div class="up"></div>
        <hr/>
        <div class="bottom"></div>
    </body>
    </html>
    

    在这里插入图片描述
    出来的半圆图,

    用上面的知识来实践。在这里插入图片描述出来一个这样的形状 鼠标单击更多可以变色,他的代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                background-color:#ccc;
            }
            .more{
                width: 60px;
                height: 20px;
                background-color:#ffffff;
                text-align: center;
                line-height: 20px;
                margin: 100px auto;
                /*圆角矩形*/
                border-radius: 10px;
                font-size: 12px;
                font-family: "微软雅黑";
            }
            a {
                display: block;
                width: 60px;
                height: 20px;
                border-radius: 10px;
                 
            }
            a:link,a:visited{
                color: #000;
                text-decoration: none;
            }
            .more a:hover {
                background-color: darkblue;
                color: #ffffff ;
            }
        </style>
    </head>
    <body>
        <div class="more"><a href=" #">更多</a></div>
    </body>
    </html>
    

    这个还可以做一个圆形图片
    在这里插入图片描述

      <style>
            img {
                height: 260px;
                width: 480px;
                border-radius:50%;
            }
        </style>
    

    在html中插入一个图片然后再用css赋值。

    展开全文
  • Html轻松实现圆角矩形

    2020-09-28 10:45:49
    主要为大家详细介绍了html轻松实现圆角矩形的方法,告诉大家如何通过div+css以及定位来实现圆角矩形?感兴趣的小伙伴们可以参考一下
  • 图形是产品设计中被讨论得最多的元素之一。...其中争议最大,且被更多互联网设计师使用的图形,是圆角矩形。而当中的讨论点是:同样的图形,圆角处理与直角处理所传递的信息有什么不同?为什么...

    https://www.uisdc.com/rounded-rectangle-to-design-trends

    图形是产品设计中被讨论得最多的元素之一。视觉设计师使用不同形状的图形来表达事物的多样性;交互设计师选择不同形状的图形,解决用户在某场景下的诉求问题。其中争议最大,且被更多互联网设计师使用的图形,是圆角矩形。而当中的讨论点是:同样的图形,圆角处理与直角处理所传递的信息有什么不同?为什么圆角成了趋势?

    许多人认为图形外框的多样化趋势是由 CSS 技术的革新开始,但正确的时间点,应该是在 iPhone 4 被发布的那一刻。

    当中的差异是:前者是通过技术参数来改变形状内容以引起用户注意;后者是通过传播真实产品塑造用户对于图形外观的全新认知。认知的转变,需作用于习惯与行为,而当中的核心手段,就是设计。(参考滴滴类产品改变人的出行方式)

    用户对于一款产品的认知,主要依据产品所能解决的实际问题以及外在形式。而设计师需要关注的点会更多,包括产品架构,流程,技术等内容。同时还需要站在用户视角观测产品是否易于使用,我们通常将其称为「用户心理模型」。类比于用户只需了解手表是否正常走动,能否准点报时,设计师则需要理解手表设计框架,结构形式等详细内容。其中最重要的,还是一名设计师对内容的全局认知。

    回到图形外观的话题上,同样的道理,人们对于产品设计中的图形使用已经逐渐理想化,好比图形外观的形式如何已经不重要,重要的是图形所传递的信息本身。这样的认知稍显片面,对于设计师而言,图形以圆角形式呈现的背后逻辑,比表面上它所表达的信息更为重要。理解这一点之后,设计师再使用圆角矩形传递信息,理解上会更显深刻。

    所以我后面会围绕下面这几个问题,来说明圆角矩形的意义:

    • 为什么 iPhone 4 的发布是圆角矩形成为设计趋势的转折点?
    • 圆角矩形传递的信息有什么不同之处?
    • 头像与按钮为什么越来越多地使用圆角?

    圆角矩形为何成为趋势

    虽然在 iPhone 4 发布时,大多数的软件图标都还是拟物风,但它们的图形外框大多是以圆角矩形的方式来处理。在 iOS 系统里,这种圆角矩形的载体已经成了其系统统一承载内容的形式。

    也许有人会问为什么 Apple 选择了这样的呈现方式,而不跟 Android 一样,为了体现内容的丰富性,让图标外框多样化呢?原因有两个。

    其一是乔布斯认为所有物件都有圆角,而相比圆形与椭圆,圆角矩形反而是生活中更为常见的现象。

    Andy Hertzfeld 在 Round Rects Are Everywhere 中讲了关于圆角矩形诞生的故事。

    Apple 的天才程序员 Bill Atkinson 创立了一种能够快速绘制圆形与椭圆的方法,乔布斯认为圆形与椭圆都不错,但是圆角矩形会更好。而 Bill Atkinson 并不这么认为,他觉得圆角矩形更难绘制,且人们也不需要圆角矩形。于是,乔布斯回应道:「到处都是带有圆角的矩形!」他指着房间里的各种物件,几乎所有地方都可以看到圆角矩形。他甚至说服 Bill 和他一起绕着街区走一圈,指出他能找到的每个带有圆角的矩形。当他们看到带有圆角的禁止停车的标示时,Bill 终于被乔布斯说服,第二天就拿出了绘制圆角矩形的方案。

    之后,他们将其命名为「RoundRects」。在接下来的几个月里,Roundrects 逐渐进入用户界面的各个部分,并很快变得不可或缺。

    尤其是在 13 年,iOS 7 对圆角的更新。它已经与我们平时认为的圆角矩形不同,这个圆角的优化过程非常复杂,当中涉及的数学算法如果不是专业的研究学者,可能无法理解其差异。

    简单来说,Apple 采用的圆角曲率所生成的图形,是更圆滑,无明显切角的。这样的圆角矩形在过渡上更平滑,且在视觉上的体验也更融洽。

    其二是,为了打造沉浸式体验,乔布斯认为应该让 iPhone 的各个元素形式统一化。

    与上述圆角图标相似的是 iPhone 机身。

    iPhone 机身所呈现的圆角在制作工艺上,比软件图标的圆角更为复杂。而其内外一致的表现形式就是为了打造沉浸式体验,形成产品的品牌认知。而 iPhone X 的面世,就是为了将这一概念彻底落实。

    前面提到,用户与设计师对于一款产品的认知是不同的。用户认识一款产品,首先关注的是外观表现,其次才是被承载的内容。所以当用户对 iPhone 以及其软件图标的展示形式已经形成认知,那么 iPhone X 的全面屏也就是很自然的一种结果。

    机身形态与软件形式的自然结合,能够让用户更好的接受产品的外在形式,且其全面屏的设计也能更好地被用户认可。甚至被很多人吐槽的 iPhone X 齐刘海也是依据这样的圆角形式来设计的,目的就是为了营造统一的产品形态。

    以至于其他一些产品在机身上的模仿,导致让人误以为类似的工业特性所产生的第一直觉都是「这是一款 iPhone」,仔细一看才知道,噢,原来是……

    当一款真实的产品被人所接受,以普遍使用在生活场景中,其中逐渐营造出用户对圆角矩形的惯性认知,以至于它的可接受度也逐渐提高。

    这也是我在开篇提到说「iPhone 4 的发布奠定了圆角矩形成为设计流行趋势的基调」的原因。

    到这为止还只是背景,下面我们再深入聊聊特性。

    圆角矩形所传递的信息特性

    上节讲述了圆角矩形兴起的背景,当然这只是一部分,圆角矩形成为流行趋势,不能说完全是因为 Apple。还有一点是,它自身本就具备的优势。

    上面提到乔布斯说服比尔,要有圆角矩形,因为生活中到处都是圆角矩形。但是这里有一个问题没有解决,即「为什么生活中到处都是圆角矩形」呢?

    玩 3D 工具的人应该知道,在 C4D 等软件里,想要对一件物体创建圆角通常是选择「倒角」,再控制「段数」,之后通过「平滑」选项,将角度变得更为圆滑(当然还有其它方式)。目的是在渲染的时候不至于让物体看起来太尖锐,色泽也更通透。

    在生活中,物件棱角如果过于锋利,则显得不够安全。工业角度,圆角/倒角可以让物件更好组装。相比棱角过于尖锐以至于让人觉得冰冷,圆角的设计反而让人更能感受到温度。所以对于推崇自然至上的乔布斯,在选择元素时,也会希望能贴近生活。

    从视觉,触感,便捷等因素能了解到真实物件的圆角优势,但优势是否适用于图形元素呢?

    这里有个相通点,即虚拟图形依附于视觉而存在。人眼在接收图形信息时,对圆角矩形的认知会优于直角矩形。因为人眼结构中辨识力最强的部位,会优先识别图形的视觉中心。而圆角与直角矩形的区别就在于内容速度的识别差异。

    之所以存在这样的差异,主要是因为图形存在视觉引导的作用。圆角因为其平滑的四边,将用户的视线过渡到图形中心,而直角矩形因为尖锐的特性,导致人眼在图形识别上容易发散。因此,在图形元素的选择上,为了让用户聚焦,圆角则获得了设计师的青睐。

    所以之后在其它设计系统与设备上,更多圆角类图形也被投入使用。尤其是在各类 App 与网页设计中,圆角矩形更是被广泛应用于头像、按钮等元素上。

    头像与按钮的圆角含义

    随着互联网产品的普及,人们对于产品界面的审美意识与体验意识逐渐提高,界面的视觉呈现也成了互联网公司所重视的对象。头像作为产品界面中用于身份信息识别的主要元素,一直是用户以及设计师最为关注的内容之一。

    因此,对头像外框形状的选择尤其谨慎。当中最为常见的主要有两类:圆形、圆角矩形。所以在进行选择时,设计师除了针对于两类图形依附于界面本身的视觉效果外,还需整体考量图形与界面元素的融合程度进行综合分析。至于直角矩形,目前很少会见到其用于头像的设计上。

    以圆形的表现形式而言,其周围没有任何节点与棱角,给人以灵动、均衡、平滑、优美的感受,通常会在带有设计感或内容元素较为丰富的产品上出现,如 ins、微博、知乎等。相比圆形而言,棱角尖锐的直角矩形给以人沉着、冷静、拘谨、冰冷的感受,所以很少产品会将其作为展示型头像开放给用户使用。而圆角矩形正好中和了这两者的气质,也成了很多产品选其作为头像的原因。通常这类头像会出现在设计较为简约的界面上,如微信首页的用户头像。

    无论是圆形头像,还是圆角矩形头像,其最终目的无非是身份识别以及彰显个性。上节聊过,圆角在识别上会引导用户倾向于图形的视觉中心,而头像作为辨识身份的信息,并不需要仔细审视,只需要快速识别即可。所以只有在点击用户头像时,才会以矩形形式完整呈现。

    这里有一个点是,当圆角矩形以头像形式出现在界面中时,通常是以小图的方式呈现。因此,当小图集中于元素复杂的界面中时,圆角矩形牺牲了构图结构,省略了四边内容背景反而成为了优势,信息与细节明显少于直角矩形,以至于在界面上帮助用户更快识别头像内容,判断图形有用信息。

    所以在头像的形状选择上,圆角矩形的优势会明显高于其他图形。而圆形与圆角矩形的差异就是上述提到的,要根据界面元素的丰富性、设计感等因素进行抉择。

    但是这里还有个思考点,就留个各位自己思考了。如果仔细观察各类产品,去寻找圆形头像与圆角矩形头像的区别,那么在头像尺寸上,也可以看到一些秘密。

    原本我还想再以按钮为例解读圆角直角的差异,不过仔细回顾内容之后自认为已经非常详细,相信各位自己也能去做好分析,所以就不增长篇幅了。有兴趣的同学,可以自己做一波分析。

    小结

    简单总结一下上面的内容:

    • 第一节讲解了圆角矩形在设计上成为流行趋势的背景;
    • 第二节告诉各位圆角矩形在信息传递上的优势;
    • 第三节以头像为例将前面的知识点落地分析。

    圆角本身只是一个很小的元素,就像其他设计理论、方法一样,我们可以忽视它背后的理论,但作为设计师,对于这些细节的追求应该是持续且专注的。

    展开全文
  • GDIp中的圆角矩形

    2018-02-17 17:43:33
    GDI+是对GDI的一个令人兴奋的扩展,但由于某些原因,它没有提供绘制圆角矩形的函数,虽然我们可以在GDI+中使用GDI中的函数,但这样一来我们没办法在圆角矩形中使用GDI+中的纹理和透明色等新特性。怎么办?GDI+中有一...
  • 把一个矩形变成圆角矩形

    千次阅读 2017-08-08 12:37:07
    首先把一张图放入ps软件中,如下图,现在需要把此图中的圆角矩形:”Enter按钮”给截图出: 2. 在左侧找到《圆角矩形工具》,或者快捷键“U” 第一步:右击选中“圆角矩形工具”; 第二步:然后在最上面选中...

    工具:Adobe Photoshop CC (64 Bit)

    1. 首先把一张图放入ps软件中,如下图,现在需要把此图中的圆角矩形:”Enter按钮”给截图出:

    这里写图片描述



    2. 在左侧找到《圆角矩形工具》,或者快捷键“U”
    第一步:右击选中“圆角矩形工具”;
    第二步:然后在最上面选中“路径”;
    第三步:设置圆角半径;

    这里写图片描述



    3 . 然后在图中选中一个区域,如果画的框不在自己想要的地方,可以按住“Ctrl”键,然后加鼠标左键拖动;如果选中框和图形相差很大,可以通过右边的”实时形状属性”面板调整像素.可以看到下图选中框已覆盖”Enter按钮”,然后按“Ctrl+Enter”选区更改

    这里写图片描述



    4. 在“图层面板”双击图片后面“锁”,对图片进行解锁 然后按“Ctrl+Shit+i”,进行反向,然后按“Del”键删除边缘区域**

    这里写图片描述

    如果保存为jpg格式,边角被删除的部分会变成白色。
    保存为png格式,被删除的部分则会变透明~(但要记得把背景图层一并删除)

    保存好的图片如图:
    这里写图片描述


    至此,由矩形修成圆角完成


    Author:su1573

    展开全文
  • 圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,我们可以使用css来制作圆角矩形,下面我们来看一下使用css制作圆角矩形的方法。圆角矩形可以用在输入框中、导航栏中、相框上、...

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,我们可以使用css来制作圆角矩形,下面我们来看一下使用css制作圆角矩形的方法。

    91ac2328ca68d22ab1be2679e9476ff2.png

    圆角矩形可以用在输入框中、导航栏中、相框上、弹出框上。总之,任何有矩形的地方都可以改成圆角矩形,也许只是小小的改动,但却会让你的网页生机盎然!

    纯css+div制作圆角矩形

    div

    {

    text-align:center;

    border:2px solid #a1a1a1;

    padding:10px 40px;

    background:#dddddd;

    width:350px;

    border-radius:25px;

    -moz-border-radius:25px; /* 老的 Firefox */

    }

    border-radius 属性允许您向元素添加圆角。

    效果如下:

    55ebcce5b9ff1e95c041fffcd42ef761.png

    css使用border-radius属性向div添加圆角即可做一个圆角矩形,border-radius属性是一个简写属性,用于设置四个 border-*-radius 属性。

    border-radius属性:

    语法:border-radius: 1-4 length|% / 1-4 length|%;

    按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

    属性值:length:定义圆角的形状。

    % :以百分比定义圆角的形状

    展开全文
  • 小程序 uni canvas绘制圆角图片 圆角矩形 获取canvas的宽度保证适应屏幕 let that=this uni.getSystemInfo({  success: function(res) { // res - 各种参数  let info = uni.createSelectorQuery()....
  • css怎么画圆角矩形?下面本篇文章就来给大家介绍一下使用css画圆角矩形的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。在CSS中,可以通过圆角边框border-radius属性来画圆角矩形。border...
  • 圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为它避开了直角的生硬,带来更好的用户体验,下面是几个设计的例子: 下面在Android中实现将普通的矩形图片绘制...
  • Android自定义圆角矩形

    千次阅读 2017-04-09 17:11:54
    在开发中,UI动不动就丢过来一个圆角矩形,一般做法就是写一个shape的xml,设置一下Radius和宽高,使高度等于两倍的圆角半径。当有很多这种宽高及radius不同的圆角矩形时,需要写很多shape的xml,再加上有selector的...
  • 自定义ImageView实现圆角矩形

    千次阅读 2015-09-22 12:16:30
    Android自带的imageView是矩形了...原理是:先取得图片的Bitmap,然后进行裁剪对应的圆角矩形的Bitmap,然后在onDraw()进行绘制圆角矩形。 先看源码: package com.youle.bige.view; import android.content.Contex
  • 如图, !...我想处理WM_NCPAINT,实现自绘窗口边框。就算把整个窗口填满,得到的窗口形状什么不是矩形,而是上面有两个圆角。如果让win8系统来绘制窗口,为什么又是没有圆角矩形窗口? 求高手指点
  • 感兴趣的小伙伴们可以参考一下问题:如何通过p+css以及定位来实现圆角矩形?解决方法概述:内容:首先在标签内部里添加一个大层(大层用来固定整体大框架),然后大层内包含四个小层(四个小层里分别放四个圆角(事先用...
  • 圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,下面在Android中实现将普通的矩形图片绘制成圆角矩形。  先来看一下普通矩形图片的显示,代码很简单,从resource中将...
  • GDI+是对GDI的一个令人兴奋的扩展,但由于某些原因,它没有提供绘制圆角矩形的函数,虽然我们可以在GDI+中使用GDI中的函数,但这样一来我们没办法在圆角矩形中使用GDI+中的纹理和透明色等新特性。怎么办?GDI+中有一...
  • WPS中,插入圆角矩形后,点击选中圆角矩形,这时会在圆角矩形的左上角显示一个小小的橙色的点,这个橙色小点就是圆角半径的控制点了。只要把鼠标放到橙色小点上,鼠标的图标就会变成一个小三角形,这时按下鼠标左键...
  • 圆形变圆角矩形

    2018-06-22 11:51:33
    首先是一个圆形,然后触发相关事件后变为圆角矩形的。感觉这个微交互还是挺棒的。然后就找了一些资料看看,最后完成了这个样子的。做出了大致的东西。是一个比较简单的玩意,大家一看就懂。在最后添加了下载地址。请...
  • 本文实例讲述了Android编程实现带渐变效果的圆角矩形。分享给大家供大家参考,具体如下:/*** 带渐变色效果的圆角矩形** @description:* @author ldm* @date 2016-4-26 下午3:47:12*/public class ...
  • 在res/drawable目录下穿件shape的xml来实现圆角矩形效果。代码如下:android:shape="rectangle" >android:bottomLeftRadius="8dp"android:bottomRightRadius="8dp"android:topLeftRadius="8dp"android:...
  • 洒壶浇灌出空间化彩色形状,大胆配色的三角形、圆角矩形抽象形状设计ppt模板。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,351
精华内容 4,940
关键字:

圆角矩形是什么形状