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 相关文章推荐
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
HTML中link标签属性的具体用法
May 07 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
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
smarty自定义函数用法示例
2016/05/20 PHP
php简单中奖算法(实例)
2017/08/15 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
python访问系统环境变量的方法
2015/04/29 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
学校联谊活动方案
2014/02/15 职场文书
党员创先争优承诺书
2014/03/26 职场文书
完整版商业计划书
2014/09/15 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
机械生产实习心得体会
2016/01/22 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL