精华内容
下载资源
问答
  • CSS3如何实现DIV圆角边框

    千次阅读 2020-02-23 16:50:24
    #CSS3如何实现DIV圆角边框 在进行页面布局时,DIV边框默认是矩形边框,想让边框为圆角时,可以用CSS3的border-radius这一属性来实现。 例如:想让div盒子边框四个角都为半径为10px的圆角时具体代码如下: 效果图: ...

    CSS3如何实现圆角边框

    在进行页面布局时,DIV边框默认是矩形边框,想让边框为圆角时,可以用CSS3的border-radius这一属性来实现。
    例如:想让div盒子边框四个角都为半径为10px的圆角时具体代码如下:
    在这里插入图片描述

    效果图:
    在这里插入图片描述

    下面对border-radius具体细节进行介绍:
    语法:border-radius: 1-4 length|% / 1-4 length|%;
    注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
    在这里插入图片描述

    定义和用法

    border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
    提示:该属性允许您为元素添加圆角边框!
    在这里插入图片描述
    border-radius的数值有三种表示方法:px、%、em,对于border-radius的值的设置,我们常用的有四种写法:
    (1)当border-radius只有一个属性值时,表示盒子的四个角都是半径为该值的圆角。
    例如:border-radius:5px;表示该盒子四个角都为半径为5px的圆角。
    在这里插入图片描述

    当border-radius属性值为50%时:
    当盒子宽高相同时,此时盒子为圆形;
    当盒子宽高不同时,此时盒子为椭圆形。
    (2)当border-radius属性值为两个时,第一个值表示左上角和右下角半径为该值,第二个值表示右上角和左下角半径为该值。
    例如:border-radius:10px 20px;
    第一个值表示左上角和右下角半径为10px,第二个值表示右上角和左下角半径为20px的圆角。
    (3)border-radius属性值为4个值时,这四个值按顺序分别表示的角为左上 右上 右下 左下。
    例如:border-radius:10px 20px 30px 40px;这四个值按顺序分别表示的角为左上角为半径10px的圆角 右上角为半径20px的圆角 右下角为半径为30px的圆角 左下角为半径40px的圆角。
    (4)可以单独对一个角设置为圆角:
    左下角:border-bottom-left-radius:10px;
    右下角:border-bottom-right-radius:10px;
    左上角:border-top-left-radius:10px;
    右上角:border-top-right-radius:10px;

    注意事项

    在设置对象为圆形的时候,如果使用了border、padding等情况时,对象的实际显示宽高已经不再是设置的width和height的数值,如果border-radius设置的值仍为原本的width和height的一半,可能达不到预期的真正的圆形的效果。
    例如:
    Div样式如下时:
    在这里插入图片描述

    此时效果:
    在这里插入图片描述

    解决方案:

    方法1:可以通过设置百分比50%的方式来解决这一情况
    在这里插入图片描述
    效果:
    在这里插入图片描述

    方法2:计算一下实际的高度再来设置border-radius的数值。上面这个例子,div实际的宽高应该是100 + 20 * 2 = 140px,所以border-radius应该设置为70px
    在这里插入图片描述

    效果:
    在这里插入图片描述
    浏览器支持

    IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

    展开全文
  • 又一个CSS DIV圆角边框代码,同样是把图片来修饰成的圆角特效,兼容IE8/火狐、Chrome等浏览器,由测试截图可看出,本实例实现上边左右两个角的圆角效果,下边则是直角,需要的朋友,自己动动手,修改一下CSS,可实现...
  • css定义div圆角边框.pdf

    2020-09-10 06:14:15
    <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en > <html xmlns= lang=zh-cn> <head> <meta http-equiv=content-type content=text/html; charset=gb2312 /> <...t
  • Div圆角边框CSS实例下载,用图片修饰而成的圆角,虽然用了图片,不过新手容易上手,特别是对DIV css不熟悉的朋友,更易套用在自己的网站里,做留言本或评论系统超不错哦!由源码素材网提供下载,谢谢你的支持。
  • 第一次css技术,谢谢! <!... <title></title> ... padding: 9px;... /*调节div位置*/ ... <div>补习时间:<input type="date" /><span> 至 </span><input type="date" /></div> </div> 效果图如下:

    大笑第一次css技术,谢谢!

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<style>
    		body{
    				padding: 9px;  /*内边距*/
    		}
    		.box{
    				width:29%;
    				padding: 30px; /*内边距*/
    				border:1px solid #666;border-radius:25px; /*圆边角*/
    				box-shadow: 5px 5px 5px #888888;          /*阴影位置*/
    			}
    		.box_title{ 
    			 	position:absolute;   /*绝对定位*/
    				background: #FFF;    /*背景色白色*/
    				top:4px; left:70px; /*调节div位置*/
    				font-size: 20px;     /*字体大小*/
    			}
    	
    	</style>
    	<body>
    		<div class="content_div box">
    			<div class="box_title"> <strong>时间与内容</strong> </div>
    			<div>补习时间:<input type="date" /><span> 至 </span><input type="date" /></div>
      		</div>
    	</body>
    </html>

    效果图如下:


    展开全文
  • div css圆角代码各种圆角表格_圆角边框css圆角
  • div圆角边框实现

    2019-10-02 13:30:44
    在高手的基础上修改得到以下div+css圆角边框实现,已加定制的一些说明。 效果图: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <...

    在高手的基础上修改得到以下div+css圆角边框实现,已加定制的一些说明。

    效果图:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>圆角边框</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="HAPedit 3.1">
    <style type="text/css">
    /*圆角边框css 可调整大小和颜色*/
    div.roundout{ width:400px;/**/background:#cde;/*背景颜色*/}
    b.rtop, b.rbottom{display:block;background: #fff;}
    b.rtop b, b.rbottom b{display:block;height: 1px;
        overflow: hidden; background: #cde;/*背景颜色*/border:solid 1px #f00;/*线条颜色*/border-top:none;border-bottom:none;}
    b.r1{margin: 0 4px;}
    b.r2{margin: 0 3px}
    b.r3{margin: 0 2px}
    b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
    b.rtop b.r1,b.rbottom b.r1{background:#f00;/*线条颜色*/}
    div.roundin{margin:0px 0px;height:50px;/**/border:solid 1px #f00;/*线条颜色*/border-top:none;border-bottom:none;}
    /*圆角边框css end*/
    </style>
    </head>
    <body>
    <!--外包裹-->
    <div class="roundout">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    <div class="roundin">
    <!--放置内容-->
    <h1>圆角边框</h1>
    <!--放置内容 end-->
    </div>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
    </div>
    <!--外包裹end-->
    </body>
    </html>

     

      

    转载于:https://www.cnblogs.com/liuhua4451/archive/2012/09/20/2695666.html

    展开全文
  • 用Css实现div圆角边框

    2009-05-07 00:34:26
    用div+css实现边框圆角,其实实现div圆角,有三种方法,也可以用圆角片来实现,还有一种技术,现在浏览器还不是很支持。
  • DIV+CSS 圆角边框

    2019-03-19 01:34:45
    NULL 博文链接:https://javapub.iteye.com/blog/711781
  • 前端----HTML/CSS 圆角边框

    千次阅读 2018-09-24 00:02:34
    border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少 其实方法特别简单,css中的一个border-radius属性就够了 这个属性是CSS 3支持的 属性值是圆角的半径,半径越大,圆角的成都越大 ...

    border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少

    其实方法特别简单,css中的一个border-radius属性就够了

    这个属性是CSS 3支持的

    属性值是圆角的半径,半径越大,圆角的成都越大

    方法如下:

    boder-top-left-radius:30px;      //左上角

    boder-top-right-radius:30px;   //右上角

    boder-bottom-left-radius:30px;  //右下角

    boder-bottom-right-radius:30px; //左下角

    如果这四个弧度的圆角相同,可以写成:

    border-radius:30px;

     

    border-radius:赋值的数量可以设置很多种不同的

    一个参数就是上边的四个圆角弧度相同

    border-radius:30px;

    两个参数则第一个参数作为左上角,右下角圆角半径,第二个作为右上,坐下圆角半径

    border-radius:30px 20px;

    三个参数分别是  左上 /  右上+左下  / 右下 角的圆角半径

    border-radius:30px 20px 10px;

    四个参数的顺序是左上 / 右上/ 右下 / 左下 的圆角半径(从左上开始顺时针)

    border-radius: 40px 30px 20px 10px ;

     

    我实验了一下4个参数的,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" charset="utf-8">
    	<style>
    		div {
    			width:200px;
    			height:100px;
    			border :2px solid red;
    			border-radius :40px 30px 20px 10px ;
    		}
    
    	</style>
    </head>
    <body>
    	<div/>
    </body>
    </html>

    效果如下:

    弧度区别不大可能看起来不明显,各位可以设置差别大一点

    展开全文
  • 下面小编就为大家带来一篇向div元素添加圆角边框的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • div圆角边框-1

    2016-08-18 16:06:00
    css代码: ... 这两个是为了兼容其他一些不常用浏览写的css圆角代码 html代码: <div class="yj">这个div四个角都圆15px;</div> 结果如下: 转载于:https://www.cnblogs.com/ljj4490/p/5784271.html
  • 圆角边框 圆角边框的语法格式如下: border-radius:length; 定义:border-radius属性用于设置元素的外边框圆角,是CSS3新增的属性。 注意: 1、参数值可以是数值或百分比的形式; 2、如果是正方形,想要设置为一个...
  • 1.如何将div框等设置为四周为圆角的样式: border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius:10px ; ...
  • Div圆角边框

    千次阅读 2007-06-15 23:34:00
    div  style ="background-color: green; height: 200" > content div >   < u  class ="corner" >< u  class ="h4" > u >< u  class ="h3" > u >< u  class ="h2" > u >< u  class ="h1" > u > u >   ...
  • html css 设置元素圆角边框

    千次阅读 2017-03-27 17:11:34
    div 元素添加圆角边框div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:350px; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ ...
  • CSS定义DIV圆角边框

    2011-01-05 12:00:00
    CSS定义DIV圆角边框 用CSS样式,比js好 有的浏览器会禁止执行脚本,那样就无效了 CSS就不会 <html> <br /><head> <br /><title>css圆角效果</title> <meta ... charset=gb2312"> ...
  • DIV边框动态效果

    2018-05-21 13:52:39
    鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果,点击触发,div沿边框画线动态...
  • 这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div边框圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: .demo{ ...
  • /*边框圆角的设置若为50px 40px 30px 20px是从左上角开始顺时针转动*/ cursor: pointer;/*鼠标指针的变化pointer是手指形式move是移动的状态text是写入的状态*/ } <div class="box"></div> ...
  • 圆角div边框

    2018-04-12 19:17:00
    <div>border-radius 属性允许您为元素添加圆角边框! </div> 效果如下     样式在标签内的写法 转载于:https://my.oschina.net/zjllovecode/blog/1794751
  • 如果没有设置圆角则会显得比较方正 通过设置border-radius可以让边角变得圆润 如果设置border-radius为50%则可以让宽高相等的div变成圆形 当然也可以设置某一部分,比如border-top-left-radius设置左上角 ....
  • div{ width: 100px;/* 设置宽 */ height: 100px;/* 设置高 */ border-radius: 40px;/* 设置为圆角 四周圆40px 可调 越小越接近直角 */ border: 2px solid #E1251B;/* 设置边框 2像素 直线 红色 */ -webkit-...
  • 本文的学习要点如下: ... <div>border-radius 属性允许您为元素添加圆角边框! </divdiv { width: 200px; height: 100px; padding:20px; border: 1px solid red; border-r
  • DIV+CSS圆角边框

    2013-09-27 16:00:10
    .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;} ....b1,.b2,.b3,.b1b,.b2b,.b3...因此,目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值
  • css 圆角边框的出现结束了传统使用圆角图片的时代,接下来与大家分享下div 边框圆角的实现,感兴趣的你可以参考下哈,希望对你有所帮助
  • div添加圆角边框

    2016-02-26 09:56:00
    初级参数:border-radius: 4px;中级参数:border-radius: 4px 6px 6px 4px;终极参数:border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; 终极解释:斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个...
  • CSS圆角边框和阴影

    2020-12-16 16:23:35
    圆角边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆角边框</title> <style> div{ height: 50px; width: 100px; border: 3px ...
  • css 圆角边框

    2021-01-19 19:33:38
    我想介绍一种比较灵活的圆角框,它可以水平和垂直扩展。需要使用四个图像:我使用的图像和上面有点不同,只是四个边框。当宽度变小时,右边的图像会覆盖左边的图像。当高度变小时,上面的图像会覆盖下面的。所以图像...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,354
精华内容 7,341
关键字:

div圆角边框