源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 160|回复: 16

[CSS] Css3圆角边框制作代码

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2015-11-18 17:00:17 | 显示全部楼层 |阅读模式
本篇文章给大家介绍基于css3来实现边框圆角效果,实现此效果当然border-radius要在firefox或Safari 和 Chrome才能实现哦。对css3圆角边框制作代码感兴趣的朋友参考下吧

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


复制代码代码如下:
<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

回复

使用道具 举报

0

主题

1万

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2022-9-18 21:18:26 | 显示全部楼层
而快乐你们快乐马年快乐
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

473

积分

中级会员

Rank: 3Rank: 3

积分
473
发表于 2022-12-22 21:53:15 | 显示全部楼层
哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

9

主题

2万

回帖

420

积分

中级会员

Rank: 3Rank: 3

积分
420
发表于 2023-5-5 05:26:25 | 显示全部楼层
啦啦啦啦啦啦啦啦!
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

301

积分

中级会员

Rank: 3Rank: 3

积分
301
发表于 2023-6-26 21:57:56 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-2 04:30:51 | 显示全部楼层
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2024-3-2 10:11:11 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-22 03:36:39 | 显示全部楼层
搞个免费的用用
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

99

积分

注册会员

Rank: 2

积分
99
发表于 2024-6-18 06:35:57 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

6

主题

1万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2024-6-23 11:36:29 | 显示全部楼层
建军节建军节建军节建军节
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-23 19:14 , Processed in 0.072284 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表