Css3圆角边框制作代码


Posted in HTML / CSS onNovember 18, 2015

经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然border-radius要在firefox或Safari 和 Chrome才能实现
W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能:

Css3圆角边框制作代码

复制代码
代码如下:

<div style=" border-top-left-radius: 55px 25px; border-bottom-left-radius: 55px 25px; border-top-right-radius: 55px 25px; border-bottom-right-radius: 55px 25px; border: 1px solid #000; padding: 10px;">Firefox 和 Safari 实现圆角</div>

Firefox 和 Safari 使用私有属性实现圆角效果;
这个表示边框内的底部图片颜色;
border: 1px solid #000;表示边框的宽度,实心的,颜色是黑色的;
border-top-left-radius: 55px 25px;表示左上角的边框圆角效果,通过英文就可以识别:top,left,修饰圆角的长度通过控制像素值来实现,55px表示横向的长度,25px表示纵向的长度;
同理,border-bottom-right-radius: 55px 25px;右下角的圆角效果只要修改top为bottom就可以了;
使用css3来实现边框圆角效果
其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius 是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性,如果你只要指定某一个角是圆角的话,它们都分别定义了四个属性:
复制代码
代码如下:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
HTML / CSS 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 #HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 #HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 #HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 #HTML / CSS
CSS3的resize属性使用初探
Sep 27 #HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 #HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 #HTML / CSS
You might like
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
PHP7修改的函数
2021/03/09 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python实现可变变量名方法详解
2019/07/01 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
报关专员求职信范文
2014/02/22 职场文书
置业顾问岗位职责
2014/03/02 职场文书
项目申请汇报材料
2014/08/16 职场文书
大学生交通专业求职信
2014/09/01 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
创业计划书之寿司
2019/07/19 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
python利用while求100内的整数和方式
2021/11/07 Python
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers