css圆角效果

最新推荐文章于 2022-10-02 10:44:17 发布
最新推荐文章于 2022-10-02 10:44:17 发布
阅读量105 收藏
点赞数
分类专栏： 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圆角平滑,3种css 圆角 解决方案
weixin_29722785的博客
08-04 936
百度有啊css圆角方案.box1{background:url('http://www.1079.com.cn/41/dome1/bg1.gif') repeat-x #1d6cb7;margin-top:1em;position:relative;zoom:1;width:778px;}.box1 .tl,.box1 .tr,.box1 .bl,.box1 .br {width:5px;heig...
CSS圆角效果
06-12
一款经典的DIV+CSS实现的圆角效果
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
碌人乘凉, 黎硕 --> Aerchi.com
03-31 295
点评：border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。 -webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核； -moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这...
CSS 团角
小龙知识堂 Andy's Knowledge Repository
08-04 112
border: 1px solid #CCCCCC;-moz-border-radius:5px 5px 5px 5px;-moz-outline-radius:5px 5px 5px 5px;
css 圆角效果
Code-lover's Learning Notes
07-14 659
-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核； -moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候，去掉哪个属性，对用他们做内核的浏览器就有影响，如果没值的话，就没影响，这两个属性和，IE，和360没关系。不删除的话影响微乎其微. bo
css2.0圆角,CSS圆角效果-CSS3常用属性集合
weixin_32364911的博客
08-04 376
CSS3使用注意项：早期的firefox chrome 等某些游览器中也实现了部分CSS3，所以为了兼容部分，在CSS3中的编写，需要如此：{-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;}{moz内核游览器，webkit内核游览器，IE9}Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直...
css阴影3d效果,3D立体带阴影的CSS圆角效果
weixin_33491377的博客
08-04 468
阴影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:...
html的圆角效果,css实现圆角效果总结
weixin_39635657的博客
06-03 382
有棱有角的方框给人一种整齐严谨的感觉，如果把方框的角改成圆角，则会给人舒服柔和的感受。如果你看不惯Div+Css布局中的一生硬的边框，大可将其改成圆角的。具体如何实现呢？综观网上的方法，大概有以下几种：利用块对象堆砌。一般是用b标签。利用背景图像定位遮挡四个角。使用javascript来处理。第一种方法实例：＜html＞＜head＞＜title＞CSS圆角效果＜/title＞＜meta http-...
css设置圆角失效
彭于晏的博客
01-06 1953
解决办法： 给容器加样式 overflow: hidden;
CSS高级篇——圆角
老梁的专栏
10-02 902
圆角会让生硬的背景图变得更圆润，可以起到很好的修饰作用。
提取自百度有啊的css圆角效果
09-06
css圆角效果大家注意下图片，其实就是利用图片+css实现
CSS3 圆角效果
09-25
现在使用CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari ...
用js实现的抽象CSS圆角效果!!
12-11
css圆角效果</title> <meta http-equiv=”content-type” content=”text/html; charset=gb2312″> <style type=”text/css”> div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{...
CSS3轻松实现圆角效果
09-27
圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天，小编为大家介绍CSS3提供的可以将矩形变为圆角矩形的一个属性，需要的朋友参考下吧
用AIDA模型，分析知乎、小红书和Facebook的广告效果.docx
06-02
用AIDA模型，分析知乎、小红书和Facebook的广告效果.docx
pd27.py1111111111111
最新发布
06-02
pd27.py1111111111111
234_基于微信小程序的车位预约系统的设计与实施-源码.zip
06-02
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯.txt
06-02
蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯
css梯形底部反圆角效果
06-10
要实现 CSS 梯形底部反圆角效果，可以使用伪元素和 `clip-path` 属性来实现。具体的实现步骤如下： 1. 首先，创建一个正常的矩形盒子，设置它的宽度和高度。 2. 使用 `transform: skew()` 属性将盒子倾斜一定角度，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值