css圆角效果

最新推荐文章于 2024-08-29 09:00:00 发布
最新推荐文章于 2024-08-29 09:00:00 发布
阅读量113 收藏
点赞数
分类专栏： JavaScript 文章标签： CSS XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sprone/article/details/83807482
版权 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!–
* { margin:0; padding:0; }
body { font: 11px Arial, sans-serif; padding: 10px; color: #333; }
a { text-decoration:none; }
a:hover { text-decoration: underline; }
/* 以下为纯CSS圆角 */
.box { padding: 10px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
b, u, i { display: block; height: 1px; overflow: hidden; }
/* 第一种圆角 */
b.f1 { margin: 0 4px; background: #09C; }
b.f2 { margin: 0 2px; border-right: 2px solid #09C; border-left: 2px solid #09C; }
b.f3 { height: 2px; margin: 0 1px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
/* 第一种圆角结束 */
/* 第二种圆角 */
u.f1 { margin: 0 3px; background: #09C; }
u.f2 { margin: 0 1px; border-right: 2px solid #09C; border-left: 2px solid #09C; }
u.f3 { margin: 0 1px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
/* 第二种圆角结束 */
/* 第三种圆角 */
i { margin: 0px 1px; background: #09C; }
/* 第三种圆角结束 */
–>
</style>
</head>
<body>
<p> </p>
<div style="width:400px;">
	<b class="f1"></b>
	<b class="f2"></b>
	<b class="f3"></b>
	<div class="box">第一种纯CSS圆角，纯CSS的优点是不用到图片，加载比较快，自动延伸不受到图片的影响。</div>
	<b class="f3"></b>
	<b class="f2"></b>
	<b class="f1"></b>
</div>
<p> </p>

<div style="width:300px;">
	<u class="f1"></u>
	<u class="f2"></u>
	<u class="f3"></u>
	<div class="box">第二种纯CSS圆角，和第一种圆角差不多。</div>
	<u class="f3"></u>
	<u class="f2"></u>
	<u class="f1"></u>
</div>
<p> </p>
<div style="width:200px;">
	<i></i>
	<div class="box">第三种纯CSS圆角，这个看不出好大的效果没有技术含量！</div>
	<i></i>
</div>
<p></p>
<p></p>
</body>
</html>
 
sprone
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS圆角效果
06-12
这个"CSS圆角效果"是一个经典案例，它展示了如何使用CSS来创建具有圆角的元素，而无需使用图片或者JavaScript。 在CSS3之前，要创建圆角效果通常需要使用切角图片或者复杂的背景图像定位技巧，这不仅增加了页面加载...
用js实现的抽象CSS圆角效果!!
10-30
在本文中，我们将探讨如何使用JavaScript来实现抽象的CSS圆角效果，从而创建一个可复用且灵活的组件。CSS圆角效果通常通过CSS3的`border-radius`属性来实现，但在不支持此属性的老版本浏览器中，我们需要采取其他...
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
碌人乘凉, 黎硕 --> Aerchi.com
03-31 307
点评：border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。 -webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核； -moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这...
CSS 团角
小龙知识堂 Andy's Knowledge Repository
08-04 122
border: 1px solid #CCCCCC;-moz-border-radius:5px 5px 5px 5px;-moz-outline-radius:5px 5px 5px 5px;
使用csss实现切角矩形，切角矩形，切角边框
qq_38181746的博客
07-20 1945
css3实现切角图案
html的css曲线实现,html – 使用css创建s形曲线
weixin_31445167的博客
06-19 1294
SVG正如哈利在评论中所建议的那样,SVG将是你最好的选择,因为如果不使用多个元素,伪元素或使用可能不支持的CSS3属性,CSS中的双曲线是不可行的.SVG代表可伸缩矢量图形. Web浏览器将其视为图像,但您可以在SVG中添加文本和普通HTML元素.所有浏览器都支持它,如下所示：CanIUseCSS当然,这仍然可以用CSS,但确实需要使用伪元素：before和：after.它对于曲线也不是最好的,...
CSS3圆角详解
Jinmy的博客
07-17 2113
圆角 border-radius属性 border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。 4个圆角（border-ra...
css2.0圆角,CSS圆角效果-CSS3常用属性集合
weixin_32364911的博客
08-04 414
CSS3使用注意项：早期的firefox chrome 等某些游览器中也实现了部分CSS3，所以为了兼容部分，在CSS3中的编写，需要如此：{-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;}{moz内核游览器，webkit内核游览器，IE9}Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直...
css 圆角效果
Code-lover's Learning Notes
07-14 668
-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核； -moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候，去掉哪个属性，对用他们做内核的浏览器就有影响，如果没值的话，就没影响，这两个属性和，IE，和360没关系。不删除的话影响微乎其微. bo
css阴影3d效果,3D立体带阴影的CSS圆角效果
weixin_33491377的博客
08-04 523
阴影CSS圆角*{margin:0;padding:0;}.box{width:400px;margin:20px auto;}h1{font-size:24px;color:#fff;padding:20px;text-align:center;}b{display:block;overflow:hidden;height:2px;background:#96C2F1;border-width:...
前端必知必会-CSS圆角
qq_24018193的博客
08-29 1599
本文介绍了CSS圆角的使用，如有问题欢迎私信和评论。
提取自百度有啊的css圆角效果
09-06
本案例中提到的“提取自百度有啊的css圆角效果”就是一种利用图片和CSS结合的方式来实现圆角的方法。 这种方法通常被称为“图像切角”或“图片拼接法”。核心思想是通过四个小的背景图像（左上角、右上角、左下角和...
CSS圆角效果（无背景图片）
05-12
在网页设计中，CSS圆角效果是常见的视觉优化手段，它可以为元素添加平滑的边缘，使得用户界面更加美观和现代。"CSS圆角效果（无背景图片）"的主题着重于如何利用纯CSS和JavaScript技术来实现这一效果，而无需依赖...
1446-基于51单片机的气压检测（MPX4115,上位机，LCD）proteus，原理图、流程图、物料清单、仿真图、源代码
09-06
1446-基于51单片机的气压检测（MPX4115,上位机，LCD）proteus，原理图、流程图、物料清单、仿真图、源代码 资料介绍： 1、使用气压传感器MPX4115检测气压 2、利用LCD1602显示气压 3、把气压值上传到上位机 有哪些资料： 1、仿真工程文件 2、源代码工程文件 3、原理图工程文件 4、流程图 5、功能介绍 6、元件清单 7、上位机软件 8、演示视频
8051Proteus仿真c源码用定时器T0的中断实现长时间定时
09-06
8051Proteus仿真c源码用定时器T0的中断实现长时间定时提取方式是百度网盘分享地址
威纶通HMI登陆方式（二）：索引密码登陆
09-06
通过用户参数设置、高级安全模式控制地址的使用以及用户登陆界面的设计实现威纶通HMI索引密码登陆。
基于yolov8的抽烟检测系统python源码+onnx模型+评估指标曲线+精美GUI界面.zip
09-06
【测试环境】 windows10 anaconda3+python3.8 torch==1.9.0+cu111 ultralytics==8.2.70 【模型可以检测出类别】 cig-pack smoke 更多实现细节参考博文：https://blog.csdn.net/FL1623863129/article/details/141964642
epoll+线程池实现的高并发服务器
最新发布
09-06
epoll+线程池实现的高并发服务器
c++ege生命游戏代码
09-06
c++ege生命游戏代码，在EGE环境下运行
CSS3快速创建圆角效果
"这篇文章主要介绍了如何使用CSS3的border-radius属性轻松实现Web页面中的圆角效果，从而提高页面性能和视觉可靠性。CSS3的border-radius属性允许开发者无需借助图片，直接通过设置元素四个角的圆角半径来创建圆角...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值