CSS实现圆角的三种方法

最新推荐文章于 2024-05-23 00:00:00 发布
最新推荐文章于 2024-05-23 00:00:00 发布
阅读量178 收藏
点赞数
/* 第一种： */

<Html>
<head>
<style>
#a {
border-left : 1px #333 solid ;
border-right : 1px #333 solid ;
width : 300px ;
height : 500px ;
}
.b {
height : 1px ;
overflow : hidden ;
border-left : 1px #333 solid ;
border-right : 1px #333 solid ;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:1px;width:298px;"></div>
<div id="a">
</div>
</div>
</body>
</Html>
/* 第二种： */

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" c>
<style type="text/css">
div.RoundedCorner { background :  #9BD1FA }
b.rtop, b.rbottom { display : block ; background :  #FFF }
b.rtop b, b.rbottom b { display : block ; height :  1px ; overflow :  hidden ;  background :  #9BD1FA }
b.r1 { margin :  0 5px }
b.r2 { margin :  0 3px }
b.r3 { margin :  0 2px }
b.rtop b.r4, b.rbottom b.r4 { margin :  0 1px ; height :  2px }
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
/* 第三种： */

<style>
.divfloat  {
margin : 0 0 10px 0 ;
background :  transparent ;  
 }

.roundtop,.roundbottom {
display : block ;  
font-size : 1px ;
width :  100% ;
background : transparent ;
}

.roundb1,.roundb2,
.roundb3,.roundb4  {
display : block ;  
overflow : hidden ;
}

.roundb1,.roundb2,.roundb3  {
height : 1px ;
border-left : 1px solid #9B9B9B ;  
border-right : 1px solid #9B9B9B ;
background : #F3F3F3 ;
}

.roundb1  { margin : 0 5px ; background : #9B9B9B ; }
.roundb2  { margin : 0 3px ; border-width : 0 2px ; }
.roundb3  { margin : 0 2px ; }
.roundb4  {
height : 2px ;  
margin : 0 1px ;
border-left : 1px solid #9B9B9B ;  
border-right : 1px solid #9B9B9B ;
background : #F3F3F3 ;
}

.roundboxcontent  {
display : block ;  
padding : 5px ;  
height : 100% ;  
overflow : hidden ;
border : 0 solid #9B9B9B ;
border-width : 0 1px ;
background : #F3F3F3 ;
}
</style>

<div class="divfloat">
<b class="roundtop">
<b class="roundb1"></b>
<b class="roundb2"></b>
<b class="roundb3"></b>
<b class="roundb4"></b>
</b>
<div class="roundboxcontent">
  <div class="sidebarwrap">
  这是圆角div内容部分
  </div>
</div>
<b class="roundbottom">
  <b class="roundb4"></b>
  <b class="roundb3"></b>
  <b class="roundb2"></b>
  <b class="roundb1"></b>
</b>
</div> 
weixin_34161083
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css圆角设置方法,css--->圆角设置
weixin_35779047的博客
08-03 6769
1.为元素添加四个相同的圆角：语法结构：border-radius：r；r为圆角的半径大小eg:如下样式，给元素添加四个圆角为10px代码如下：radiusdiv{width: 100px;height: 100px;background-color: aqua;border-radius: 10px;}2.为元素创建一个圆角语法结构：左上角：border-top-left-radius: r ；...
css设置圆角
weixin_69761220的博客
05-18 8678
用border-radius属性来设置圆角 可以写： 四个值：左上 右上 右下 左下 三个值：左上 右上左下 右下 两个值：左上右下 右上左下 一个值：共用 给单独一角设置圆角：border-xxx-xxx-radius 例如：左上角 border-top-left-radius div{ width: 100px; height: 100px; background-color: red...
css怎样用 css实现圆角的几种方法
hdxx2022的博客
10-05 7599
首先要在htmL代码中引入css文件，方法是将如下代码添加到head中。第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。此选择器的特征为样式名前有定义符"#"，可为指定id的元素附加样式。此种选择器的样式名称前没有任何符号，可以给某种容器或标签附加样式。制作四个圆角的图片，然后用css定义。第一、直接写css代码：border-radius。css提供4种选择器，分别由不同的符号表示。body{样式}是为body附加样式。通过组合可以在同一对象应用多种样式。有四种方法可以实现圆角。
CSS 设置圆角，这些便捷技巧你知道吗
最新发布
大剑师兰特的GIS世界
05-23 1309
CSS圆角主要通过`border-radius`属性来实现，它可以让你轻松地为元素的边角添加弧度，使界面看起来更加友好和现代化。以下是一些关于`border-radius`的使用场景、示例代码及注意事项的详细介绍
CSS3 三 圆角
W_H_M_2018的博客
09-29 790
CSS3圆角 CSS3 圆角制作器 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。 属性 border-radius 9.0 5.0 4.0 -webkit- 4.0 3.0 -moz- 5.0 3.1 -webkit- 10.5 CSS3 border-radius 属性 使用 CSS3 ...
css圆角（border-radius）的深入理解
wll_web的博客
01-07 3053
css圆角（border-radius）的深入理解 写在前面： 1.介绍： 在border-radius出来之前，传统的生成圆角，必须使用多张图片作为背景图案，浪费很多的时间。 css3圆角的出现，使我们再也不必浪费时间去制作这些图片了，并且可以减少文件维护的工作量、提高网页性能，增加视觉可靠性。 2.border-radius: 这是一个简写属性，用来设置： border-top-l...
纯CSS实现圆角折叠菜单的方法
01-19
本文实例讲述了纯CSS实现圆角折叠菜单的方法。分享给大家供大家参考。具体实现方法如下： 复制代码代码如下:<html><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /...
css实现带圆角三角型的示例代码
09-27
主要介绍了css实现带圆角三角型的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS技巧之圆角背景与三角形实现方法
09-25
前端开发中两个很不错的小技巧, CSS三角形与圆角背景.
使用css实现圆角图形绘制
09-25
主要介绍了使用css实现圆角图形绘制,文中也提到了相关的锯齿问题,需要的朋友可以参考下
CSS圆角进化论
lmrylll的博客
06-24 2105
注意：使用css3.0实现圆角，各浏览器存在显示差异，需通过私有前缀解决：-ms-(IE)、-moz-(FF)、-webkit-(谷歌，safari)，特别的，各浏览器对border-radius属性支持较好，不写私有前缀也能正常显示，但像线性渐变属性linear-gradient，就必须写私有前缀，否则就会出现显示差异。☛CSS3.0圆角属性实现圆角： 圆角属性+边框属性实现圆角：border属性设置边框样式（颜色、粗细、样式），border-radius属性实现圆角。2.绝对定位于box的4个角。
CSS圆角
weixin_34221036的博客
10-18 53
border-radius 此CSS属性用于做圆角 box-shadow 此CSS属性用于做阴影效果 文章链接http://www.cnblogs.com/lianjun/archive/2011/03/11/1981606.html 转载于:https://www.cnblogs.com/manyiString/archive/2012/10/18/2729396.html...
CSS圆角样式详解
weixin_41174502的博客
03-27 2175
什么是圆角样式呢？ 直观一点理解就是原本矩形的盒子现在出现了圆角区域。这些都是通过css的border-radius圆角样式实现的。 先来理解一下圆角样式的原理: ...
css实现卡卷内圆角
Yiu的博客
06-13 1792
在工作中做一些活动类的H5的时候，经常会遇到UI大佬给出的难题，比如卡卷类的上下半圆角，如图： 看到这个的时候显示蒙了一下，然后快速想出了解决办法，一个盒子内填充两个伪元素不就解决了吗？ 事实结果是可以解决，但是阴影加不上去被伪元素覆盖，代码过于耦合。 于是通过查阅资料，在《CSS揭秘》书中找到了一种解决方案，可以实现两个挖空半圆的效果；但又发现一个问题————不能 加阴影box-...
css如何实现圆角边框
xxxx_1104的博客
02-23 8966
圆角边框属性是css3新增的属性，在圆角边框属性出现之前想要实现圆角边框都是用图片做背景实现的，现在有了圆角边框属性实现圆角效果就简单多了。 　　1、圆角边框属性 ：border-radius：可以为元素添加圆角边框，他可以一个值对四个角设置，也可以分别给每个角设置 　　　先设置一个高和宽为200背景为红色的容器　　　 　 　　 　　　（1）设置一个值 四个角都是相同的 　　　实现方法： 　　...
纯css实现内凹圆角-书签笔记本模式
weixin_39370315的博客
03-09 986
纯css实现内凹圆角，不定时更新不同设计版本模式代码
css设置div圆角
热门推荐
16个夏天。。。
12-16 2万+
昨天去面试，面试官一上来就开始问技术方面的问题，感觉很糟糕，很多知识点只记得大概，其中面试官提到怎么设置div文圆角，当时我就蒙了，虽然我是做后台的，之前听过说把按钮设置成圆角，但那都是前台的处理，也没多个心眼百度，哎！现在吃亏了。 CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用
CSS实现圆角的方法
weixin_34138255的博客
05-12 82
1 &lt;style type="text/css"&gt; 2 body,p,div {margin:0;padding:0;} 3 .Box {margin:10px auto;width:500px;} 4 /*淘宝的圆角方法*/ 5 .R-1-T,.R-1-B {height:6px;position:relative;background-image:url(ht...
css 有点圆角三角形角标
08-17
另一种方法是使用CSS的clip-path属性，通过定义一个自定义的路径来裁剪元素，从而实现圆角三角形的效果。可以使用polygon()函数或inset()函数来创建路径，然后指定圆角的半径。 需要注意的是，不同浏览器对于border...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值