圆角边框制作,方法有多种,自己觉得比较好的一种写下制作方式
1.使用photoshops制作边框圆角为5px的圆角矩形
2.按ctrl+enter路径变为选取,
3.新建一个图层描边,选择菜单“编辑”-->“描边”1px,选择自己想要的颜色
4.使用矩形选取工具选取描边后的矩形“左下角”(选取框大小为5px)
5.复制一个角
6.通过复制的角再复制“水平翻转”变形,和“垂直翻转”制作以下图形
7.删除背景层,制作以下图效果(注意为了看到效果,本图放大处理)
8.按快捷键ctrl+alt+shift+s保存为“web”所需格式png-8(如下所式)
到此图片制作完成。
下一步就是div+css完成结构
样式表部分
h1,body,p,div{ margin:0; padding:0;}/*清楚magin和padding*/
.rounded-box{ width:300px; margin:0 auto;} /*圆角外盒子,设置大小改变圆角矩形框*/
.cont-box{ border:1px solid #a3a3a3;}/*内容*/
.t-l,.t-l b,.b-l,.b-l b{background:url(images/bo2.png) -999em 0 no-repeat; font-size:0px;}/*四个角使用的背景图*/
.t-l,.b-l{ height:5px; position:relative; display:block; background-position:-5px 0;margin-bottom:-5px;}/*控制圆角位置*/
.t-l b,.b-l b{ float:right; width:5px; height:5px; display:block; background-position:0 0;}/*控制圆角位置*/
.b-l{margin-top:-5px;margin-bottom:0px; background-position:-5px -5px;}/*控制下面圆角*/
.b-l b{background-position:0 -5px;}/*控制背景图位置*/
.title1{background:url(images/title-bg.png); font-size:14px;color:#FFF; line-height:24px; text-align:center;}/*控制标题样式*/
html部分
<div class="rounded-box"><b class="t-l"><b></b></b>
<div class="cont-box">
<h1 class="title1">这是一个测试</h1>
<div>
<p>圆角内容 </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<b class="b-l"><b></b></b>
</div>
完整代码 “圆角制作.rar”
- 大小: 5 KB
- 大小: 5.3 KB
- 大小: 15.6 KB
- 大小: 2.8 KB
- 大小: 4.8 KB
- 大小: 3.6 KB
分享到:
相关推荐
首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml、shape_corner_up.xml和shape_corner.xml,分别是下面两个角是圆角边框,上面两个角是圆角边框,四个角全部是圆角...
CSS圆角边框CSS圆角边框CSS圆角边框CSS圆角边框CSS圆角边框CSS圆角边框
css用图片实现圆角边框的效果 css用图片实现圆角边框的效果
css3中的边框一般多为矩形,也可以通过设置实现圆角边框的效果,通过border-radius:;通过设置该属性值得大小改变边框的圆角大小,从而达到自己需要的圆角边框效果
Android为ListView添加圆角边框效果,安卓UI设计的例子,默认情况下ListView的外框是直角的,也就是大家习惯的样式,但为了美化更突出,或者与你的应用风格更吻合,有时候可能修饰成圆角边框,本例子就是实现了这一...
css圆角边框css圆角边框css圆角边框css圆角边框css圆角边框
圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar
圆角边框源代码,非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好
自定义TextView带边框,可以动态更边框颜色以及字体颜色,可设置边框圆角
jquery实现圆角边框 圆角边框 jquery实现圆角边框 圆角边框
圆角边框
Java;边框;Java Jframe圆角边框;圆角 Java 圆角边框实例
Jquery实现圆角边框效果的源码,Jquery实现圆角边框效果的源码
editText和Dialog等组件的圆角边框设置
兼容各种浏览器的圆角边框,真正有效,亲自测试过
CSS圆角边框、按钮插件CSS圆角边框、按钮插件CSS圆角边框、按钮插件
css 圆角边框 样式表 css 圆角边框原理及网页实例
6种方法解决网页圆角边框,UI开发者很实用的东西,面试时也会被问到。
css圆角边框
NULL 博文链接:https://javapub.iteye.com/blog/711781