-
圆角矩形 边框
2014-07-25 14:31:15展开全文<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#2e81ab"/>
<corners android:radius="20dp"></corners>
<stroke android:width="2dp" android:color="#777777"></stroke>
</shape>
-
纯CSS制作圆角矩形框知识总结
2015-08-23 21:33:30在制作后台登录页的时候，需要从网页上面把那个圆角矩形框选取下来，然后通过Photoshop进行切割，在进行设置，最后得到需要的登录框的圆角矩形框。如下图。 但是登录最新的智囊团的那个登录页面的时候，上面...展开全文在制作后台登录页的时候，需要从网页上面把那个圆角矩形框选取下来，然后通过Photoshop进行切割，在进行设置，最后得到需要的登录框的圆角矩形框。如下图。
但是登录最新的智囊团的那个登录页面的时候，上面的那个圆角矩形框已经没有了，最新的登陆页面跟QQ邮箱登录页面一样，没有了圆角矩形框。所以我就想到了用css自己堆出来一个圆角矩形框，通过查找资料，以及自己的一些使用方法的改进，最终得到了自己所需要的圆角矩形框——纯CSS设计圆角矩形框。
下面讲一下思路：圆角矩形框的难点就在于如何把那个圆角表示出来，其实我们把那个圆角的地方放大一下就会发现，所谓的圆角并不是严格的圆角，只是由于线条看起来比较和谐，那个圆角其实也是直角的框的那个直角。
这就是一个放大了的圆角矩形框，可以看到圆角的具体构成。
明白了原理，下面是代码的实现部分，非常简单：
<span style="font-family:KaiTi_GB2312;font-size:24px;"><%--制作圆角矩形的代码-HTML代码部分--%> <div class="divbox"> <div class="div1"></div> <div class="div2"></div> <div class="divmiddle"> 主要内容 </div> <div class="div2"></div> <div class="div1"></div> </div> </span><span style="font-family:KaiTi_GB2312;font-size:24px;">/*圆角框的制作-CSS代码部分*/ .divbox { width: 580px; } /*.div1 .div2 .divmiddle{ float :right ; }*/ .div1 { background: #999999; border-left: #999999 solid 3px; border-right: solid 3px #999; margin: 0px 6px; height: 3px; overflow: hidden; } .div2 { background: #FFF; border-left: #999999 solid 3px; border-right: solid 3px #999; margin: 0px 2px; height: 3px; overflow: hidden; } .divmiddle { height: 285px; border-left: #999999 solid 3px; border-right: solid 3px #999; } .divmiddle p,h3,btnLogin,btnCancel{ float :right ; } </span>通过代码可以看出，圆角矩形框通过3类的div标签进行组合设计，最终形成一个圆角矩形框。这里关键的是overflow属性，是把被覆盖的内容给隐藏了，所以可以露出自己需要的部分，这里的技巧需要读者自己思考。
接下来就是实战了，在middle中添加如下代码：
<span style="font-family:KaiTi_GB2312;font-size:24px;"><h3>牛腩新闻发布系统后台登录</h3> <img src="Images/步枪.jpg" alt="logo" height="150" width="150"/> <p>用户名：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></p> <p>密 码：<asp:TextBox ID="txtPassword" runat="server" TextMode ="Password"></asp:TextBox></p> <p>验证码：123456<asp:TextBox ID="txtCode" runat="server" CssClass ="txtcode" Width="104px"></asp:TextBox></p> <p><asp:Button ID="btnLogin" runat="server" Text="登录" /><asp:Button ID="btnCancel" runat="server" Text="取消" /></p> <div><div class ="footer">版权声明：©<a href="http://niunun.javaeve.com">牛腩</a> &<a href="http://www.tg029.com" target="blank">众志网</a></div></div> </span>
按照正常的理解，在圆角矩形框中会出现一系列的控件，事实上也是如此，但是却出现了另外一个问题，如下图：圆角矩形框的边出现了空白，这是由于在使用了<h3>，在这个正常流中<h3>这个部分的宽度比较大，把左右两边的正常流的边给撑开了，所以出现了断线的部分。那么只要把<h3>的部分从正常流中拿走就可以改正这个缺点，对，就是float属性，下面的效果是经过我半个下午2个小时的不断调试，最终形成的结果：
通过float属性，浮动控件，然后再重新进行定位，这样的效果看似简单，后面包含的过程却是对自己知识的一个总结提升，这个过程对我来说非常享受，全身心的投入到最后的效果出来，感觉那真是爽。当然了这个设计效果还是有提升空间的，比如把整个的框移到垂直方向上的中间线，等等，那就发挥你的想象力吧。
-
css圆角矩形边框
2020-10-10 15:19:35圆角矩形： border-radius:10px 10px为圆角的半径，越大圆角越大 圆： border-radius:50%展开全文圆角矩形：
border-radius:10px
10px为圆角的半径，越大圆角越大圆：
border-radius:50%
-
JavaScript 使用canvas绘制圆角矩形边框
2020-12-22 18:04:06Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。 我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处，...展开全文前言
在react项目中需要用到绘制矩形填充, 因为直角矩形不够美观, 需要绘制圆角填充矩形分析
Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。
我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处，然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点的都是可以的(这部分在绘制曲线部分已经详述)。此处我们将终点设为(x+w,y+h);这就是第一段曲线。第一段曲线绘制完毕之后，画笔落在了下图绿色点的位置。
现在再看下第二段曲线:
因此我们直接使用arcTo(x+w,y+h,x,y+h,r)绘制出第二个圆角,第二个曲线绘制完毕后,画笔落在了绿色点位置。
我们可以使用同样的方法来绘制第三个圆角。acrTo(x,y+h,x,y,r)
第四个圆角arcTo(x,y,x+w,y)
这样,一个圆角矩形就完成了。为了方便使用,我们可以将绘制圆角矩形的方法封装在一个函数,或者加入到CanvasRenderingContext2D的原型中。
x,y是矩形的起点;w,h是矩形的宽高;r是圆角矩形的半径CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) { if (w < 2 * r) {r = w / 2;} if (h < 2 * r){ r = h / 2;} this.beginPath(); this.moveTo(x+r, y); this.arcTo(x+w, y, x+w, y+h, r); this.arcTo(x+w, y+h, x, y+h, r); this.arcTo(x, y+h, x, y, r); this.arcTo(x, y, x+w, y, r); this.closePath(); return this; }这里使用了return this,这样我们就可以像使用jquery一样,使用链式语法。
完整代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id = "palette" width="400px" height="400px"> 您的浏览器不支持Canvas标签，请升级或更换浏览器 </canvas> <script> var palette = document.querySelector("#palette").getContext("2d"); palette.moveTo(0,0); palette.lineTo(0,300); palette.moveTo(50.5,0); palette.lineTo(50.5,300); palette.moveTo(100.5,0); palette.lineTo(100.5,300); palette.moveTo(150.5,0); palette.lineTo(150.5,300); palette.moveTo(200.5,0); palette.lineTo(200.5,300); palette.moveTo(250.5,0); palette.lineTo(250.5,300); palette.moveTo(300.5,0); palette.lineTo(300.5,300); palette.moveTo(0,0); palette.lineTo(300,0); palette.moveTo(0,50.5); palette.lineTo(300,50.5); palette.moveTo(0,100.5); palette.lineTo(300,100.5); palette.moveTo(0,150.5); palette.lineTo(300,150.5); palette.moveTo(0,200.5); palette.lineTo(300,200.5); palette.moveTo(0,250.5); palette.lineTo(300,250.5); palette.moveTo(0,300.5); palette.lineTo(300,300.5); palette.stroke(); CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) { if (w < 2 * r) r = w / 2; if (h < 2 * r) r = h / 2; this.beginPath(); this.moveTo(x+r, y); this.arcTo(x+w, y, x+w, y+h, r); this.arcTo(x+w, y+h, x, y+h, r); this.arcTo(x, y+h, x, y, r); this.arcTo(x, y, x+w, y, r); this.closePath(); return this; } palette.lineWidth = 5; palette.strokeStyle = "#F00"; palette.roundRect(50,50,200,150,30).stroke(); // 绘制填充 palette.fillStyle = "rgba(255, 192, 203, 0.5)"; palette.fill(); </script> </body> </html>
内容来源：https://blog.csdn.net/shi851051279/article/details/80436851
原文来源：https://blog.csdn.net/shi851051279/article/details/80436851
原作者：泥猴桃
-
纯CSS技术实现可变高度的圆角矩形框-so easy
2015-08-25 12:10:07在网页设计中，还有很多的可变宽度的圆角矩形框的使用，一些网页不可能用一些固定宽度的圆角矩形框来显示内容，可变宽度的圆角矩形框的使用地位是很重要的，那么现在来扩展下思维，能不能用纯CSS的技 -
Android-FlycoRoundView-一个扩展原生控件支持圆角矩形框背景的库可以减少相关shape资源文件使用
2019-08-13 04:09:39FlycoRoundView - 一个扩展原生控件支持圆角矩形框背景的库,可以减少相关shape资源文件使用。 -
MFC实现圆角矩形边框按钮（仿照win7风格）
2021-04-29 15:01:37MFC实现圆角矩形边框按钮效果图设计方式使用方式类文件 效果图 按下时文字会进行偏移，模拟常规按钮按下的效果 设计方式 本类继承CButton 首先，重载PreSubclassWindow()，用于添加按钮样式，本类中，添加了BS_... -
圆角矩形框制作 ie-css3.htc 图像投影
2012-04-02 16:54:38利用此文件可以在IE浏览器中直接使用css制作出圆角矩形框，图像投影等特效！并且兼容性很好，此方法支持IE6.0/IE7.0/IE8.0/谷歌浏览器(Chrome)/火狐浏览器(Firefox)/Safari/Opera，其他的本人尚未测试，如果你测试... -
Fireworks MX 圆角矩形框(转)
2007-08-12 14:20:27Fireworks MX 圆角矩形框(转)[@more@] 1.在工具面板上选择圆角矩形工具，在画布上绘制一个圆角矩形。 2.在属性检查器中设置如下。 3.做出的圆角矩形框。 ... -
xml中设置圆角矩形框
2017-01-04 14:32:28设置圆角的矩形框可以在drawable中新建个xml文件： android:width="1px" android:color="#000000" > stroke：矩形框线条颜色宽度 corners：圆角，android:radius="2dp"表示圆角弧度 solid... -
java圆角矩形边框消除锯齿Demo.rar
2020-04-08 06:58:12主要代码： BufferedImage image = new BufferedImage(400, 120, BufferedImage.TYPE_4BYTE_ABGR); Graphics2D g2d = image.createGraphics(); g2d.setColor(Color.BLUE); ... //g2d.fillRoundRect(0, 0, 400, ... -
Android shape 圆角 矩形框
2019-09-24 17:59:50<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> ...solid android:color="@android:color/transpa... -
纯css编写圆角矩形框
2020-04-28 22:50:54效果图 html代码： <div id="box"> ... 总结：在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形，最简单的方法是用八个div来画出边框。利用margin、padding、overflow组合完成。 -
css圆角矩形框
2012-06-20 09:30:51纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。 图一 从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个... -
MFC创建圆角矩形边框
2012-07-17 15:58:58最近在写一个安装程序的界面。需要自绘对话框及一系列控件。 个人认为MFC自定义控件或对话框最基本的思想就是了解这些元素的创建过程，并适当的截取消息进行重写。...我们要绘制一个圆角矩形的边框。 就是响应 -
Android自定义矩形边框，圆角矩形边框（可以只定义其中某个边的颜色值）
2020-05-27 23:57:26关于边框画线问题，今天在这里做个总结方便自己记忆，也希望能够帮助大家 全边的 代码： 效果图： 全边圆角 代码： 效果图： 只显示某一部分边框 代码： 效果图： -
Android渐变色圆角矩形框
2018-01-11 14:24:26效果如图： 实现代码如下图所示： package com.example.demo.practice.ui; ...import android.content.Context;...import android.graphics.Canvas;...import android.graphics.LinearGradient;...imp -
安卓用shape画圆角矩形边框
2019-01-10 10:55:43效果图： 代码： 一、xml方式 代码: shape_rec_blue.xml 圆角矩形边框 圆角矩形背景 使用 二、kotlin方式 代码 圆角矩形边框 private fun getRoundRectStroke() = GradientDrawable().also { it.shape = ... -
css做出圆角矩形边框
2011-08-09 13:19:38无突出边框的： 用css做带圆角的边框 body{padding: 20px;background-color: #FFF; font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif} h1,
收藏数
1,083
精华内容
433