border

从box-sizing:border-box属性入手，来了解盒模型

万次阅读 多人点赞 2018-06-20 14:02:00

从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局...

    从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。 
    背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。 
    注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。 
            box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。 
一、回顾基础 
        （1）框属性的基本规范： 
            文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下： 
 
即width=content 
            ①width和height设置内容框（content box）的宽度和高度。内容框是框内容显示的区域--包括框内的文本内容，以及表示镶嵌子元素的其他框； 
            ②padding表示一个CSS框内边距--这一层位于内容框的外边缘与边界的内边缘之间； 
            ③border即CSS框的边界是一个分割层，位于内边距的外边缘以及外边距的内边缘之间； 
            ④margin即外边距代表CSS框周围的外部区域。 
            （2）运用box-sizing:border-box属性下，框模型的变化 
             
即width=content+padding+border(此时，当div的宽度为50%时，而border和padding为px时，那么content会随着实际的宽度进行自动缩放；) 
         （3）来看看实际的例子：     
            ①设计稿如下所示： 
 
            ②实际代码： 
            本例子中，采用的是flex布局的方式，为了自适应，宽度width采用的是百分比%的形式，border，padding，margin采用的是px尺寸，所有外层的盒子运用了box-sizing:border-box;属性来改变盒子的结构，从而实现需求。 
<body>
	<div class="clear_float">
	     <div class="goods_cell">
		  <div>
		       <img class="img_goods" src="../images/img_goods.png" alt="">
		  </div>
		  <div class="text_goods">
		       双宫茧桑蚕丝被
		  </div>
		  <div class="goods_price">
		       <div class="price_span">活动秒杀价：</div>
		       <div class="price_num">¥  499.00</div>
		  </div>
		  <div class="goods_seckill">
		       <div class="seckill_left">仅剩<span>23:59:00</span></div>
		       <div class="seckill_right">秒杀</div>
		  </div>
	      </div>
	      <div class="goods_cell">
	          <div>
		      <img class="img_goods" src="../images/img_goods.png" alt="">
	          </div>
	          <div class="text_goods">
		  双宫茧桑蚕丝被
	          </div>
	          <div class="goods_price">
		       <div class="price_span">活动秒杀价：</div>
		       <div class="price_num">¥  499.00</div>
	          </div>
	          <div class="goods_seckill">
		       <div class="seckill_left">仅剩<span>23:59:00</span></div>
		       <div class="seckill_right">秒杀</div>
	          </div>
	      </div>
	      <div class="goods_cell">
		   <div>
			<img class="img_goods" src="../images/img_goods.png" alt="">
		   </div>
		   <div class="text_goods">
			双宫茧桑蚕丝被
		   </div>
		   <div class="goods_price">
			<div class="price_span">活动秒杀价：</div>
			<div class="price_num">¥  499.00</div>
		   </div>
		   <div class="goods_seckill">
			<div class="seckill_left">仅剩<span>23:59:00</span></div>
			<div class="seckill_right">秒杀</div>
		   </div>
	       </div>
	       <div class="goods_cell">
		    <div>
			<img class="img_goods" src="../images/img_goods.png" alt="">
		    </div>
		    <div class="text_goods">
			双宫茧桑蚕丝被
		    </div>
		    <div class="goods_price">
			 <div class="price_span">活动秒杀价：</div>
			 <div class="price_num">¥  499.00</div>
		    </div>
		    <div class="goods_seckill">
			 <div class="seckill_left">仅剩<span>23:59:00</span></div>
			 <div class="seckill_right">秒杀</div>
		    </div>
		</div>
	</div>
</body> 
<style>
.clear_float{
	margin-bottom:20px;
}
.goods_cell{
	width: 47%;
	box-sizing: border-box;
	padding: 10px;
	float: left;
	box-shadow: 0 0 6px 0 rgba(0,0,0,0.20);
	border-radius: 10px;
	font-size:13px;
	color: #333333;
	margin-left:15px;
	margin-bottom:20px;
}
.clear_float>.goods_cell:nth-of-type(2n+1){
	margin-left: 0;
}
.img_goods{
	width:78.5px;
	height:96px;
	display: block;
	margin: 0 auto;
}
.text_goods{
	margin:10px 0;
	color:#333333;
	font-size:13px;
}
.goods_price{
	font-size:18px;
	color: #FF0845;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom:1px;
}
.goods_price .price_span{
	font-size:8px;
	color:#fa5754;
	line-height:8px;
}
.goods_price .price_num{
	font-size:16px;
	color:#fa5754;
	line-height:18px;	
}
.goods_seckill{
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing:border-box;
	line-height:15px;
	width:100%;
	height:15px;
}
.goods_seckill .seckill_left{
	width:70%;
	padding:2.5px 0px;
	font-size:10px;
	color:#2d2d2d;
	line-height:10px;
	border:1px solid #999999;
	border-right:1px solid #ff0845;
	text-align:center;
}
.goods_seckill .seckill_right{
	width:30%;
	color:#ffffff;
	background-color:#ff0845;
	border:1px solid #ff0845;
	font-size:10px;
	line-height:10px;
	padding:2.5px 8px;
	text-align:center;
}
</style> 
        ③在游览器上模拟的320px,375px和414px尺寸下，显示的效果图： 
 
 
 
二、盒模型的其他属性 
        （1）margin，padding设置为百分比形式： 
            给<main>元素的内边距和外边距的各个边设置为5%，意味着“包含元素宽度的5%”，因此，随着示例输出窗口的大小增加，内边距和外边距也增加了。 
        （2）margin可以接受负数，可以用来引起元素框的重叠： 
 
          （3）背景裁剪（Background clip）属性： 
            background-clip:border-box;背景被裁剪到边框盒； 
            background-cilp:padding-box;背景被裁剪到内边距框； 
            background-clip:content-box;背景被裁剪到内容框。 
            可以看看以下效果图比较一下： 
 
 
 
        （4）轮廓（Outline）： 
            一个框的outline是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）。 
 
            相关实例：在引入bootstrap框架时，input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，这就是outline造成的影响，去掉只需要添加一个CSS样式即可，input:focus{outline:none;}。 
            详情介绍可以查看之前的文章：实现输入框input在获得焦点时外边框不变蓝  点击打开链接 
        （5）CSS框类型，通过display属性来设定元素的框类型： 
            最常见的display类型是：block，inline,inline-block，即块框（block box）,行内框（inline box）,行内块状框（inline-block box）. 
                注意：默认状态下display属性值，块级元素display:block，行内元素display:inline。 
                不常见的类型display类型是：table,flex,grid. 
                ①display:table--允许你像处理table布局那样处理非table元素，而不是滥用HTML的<table>标签来达到同样的目的； 
                 ②display:flex--允许你处理一些困扰CSS已久的一些传统布局问题，如布置一系列弹性等宽容器或者垂直居中内容（目前，flex布局在移动端使用较为广泛）； 
                  ③display:grid--给出一种简单实现CSS网络系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网络框架。 
           （6）框的高度     
            框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px或者em）,它会比在页面上默认是100%高度更实用。 
            （7）盒的高级属性--设置宽和高的约束 
                ①通过min-width,max-width,min-height,max-height 属性，来设置大小约束，以更灵活的方式控制内容盒的大小： 
                    这类情况通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式。 
width:70%;
max-width:1280px;
min-width:480px; 
                然后，添加下句CSS使该容器在它的父容器内居中显示： 
margin:0 auto; 
                那么最终呈现的效果是：当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。当宽度低于480px时，视口将小于容器，您必须滚动才能看到完全的内容。 
            ②max-width属性的另一个好处是可以将容器内的媒体（如图像和视频）控制在容器内（响应式图片）： 
            在上述例子中，图像会引起一个问题--起初它的显示正常，但当容器变得比图像更窄时，图像开始溢流容器（因为它是一个固定的宽度）。解决这类问题，可以用以下CSS： 
display:block;
margin:0 auto;
max-width:100%; 
            前两条属性display:block,margin:0 auto，使它的展示行为像一个块元素并且在父容器内居中。而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。(这样，可以让图片最大只能是自己的宽度，成为响应式的图片) 
            而这类运用最好的实例就是bootstrap框架中，图像的img-responsive类名的属性，在框架下，图像添加了img-responsive类名，就能达到在视口宽度不断变化的情况下，图像都可以达到响应式的缩放形式，这也是图像响应式的秘诀所在。 
 
        三、总结 
               关于盒模型的总结，是从运用实例的角度来引入的，并未按照常规的顺序来进行梳理，如果大家想了解盒模型的完整知识，推荐查看MDN的盒模型讲解完整篇，点击打开链接，以及MDN再述盒模型篇，点击打开链接。 
               如文章哪里有问题，欢迎大家留言进行指正，谢谢！ 
                参考博客：框模型--学习WEB开发  点击打开链接 
                 版权声明：本文为博主原创文章，未经博主允许不得转载。

收起

展开全文

盒模型

border-left、border-right、border-top、border-bottom深入理解

千次阅读 2019-04-17 18:44:20

一、有宽和高 1.一个矩形的4个边的组成部分 .box { border-right: 55px solid red; width: 200px; height: 200px;... border-bottom: 55px solid blue;... border-left: 55px solid ... border-top: 55px solid...

一、有宽和高 
1.一个矩形的4个边的组成部分 
.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
    border-left: 55px solid yellow;
    border-top: 55px solid green;
} 
 
由图可知，4个border其实都是等腰梯形 
2.3个border 
.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
    border-left: 55px solid yellow;
} 
 
由上图可知，当只有3个border时，缺口部分不再是斜的，变成了水平线。 
3。同理当只有2个border时，切口全部变成水平或者垂直 
.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
} 
 
.box {
  border-top: 55px solid red;
  width: 200px;
  height: 200px;
  border-bottom: 55px solid blue;  
} 
 
二、宽和高有一个为0 
1.宽不为0，高为0 
（1）4个边 
 
2.3个边 
 
3.2个边 
 
4.有宽，有border-top或者border-bottom。有高，有border-left或者border-right 
 
5.其他 无 
(2) 宽为0，高为0 
1.4个border 
 
2.3个border 
 
3.2个border（相邻） 
 
4.其他无

收起

展开全文

border-top、border-style、border-color属性的顺序

千次阅读 2018-04-19 09:44:10

css样式记录： &...时发现样式边框并没有显示，经过测试发现，如果border-style与border-color在各个边框设置的前面，则border-style与border-color属性并不会生效。正确的书写顺序是 bord...

css样式记录：
在同时设置border-style: solid;border-color: #f00;border-top: 1px;时发现样式边框并没有显示，经过测试发现，如果border-style与border-color在各个边框设置的前面，则border-style与border-color属性并不会生效。正确的书写顺序是
border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-style: solid; border-color: #f00;
border-style与border-color必须在border-width之后。

收起

展开全文

css

border之border-style用法

千次阅读 2017-03-29 12:56:33

border-style border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 border-style兼容性很好，基本所有浏览器都兼容border-style拥有一下属性值值描述 none 定义无边框。 hidden ...

border-style 
 
 border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 
 
border-style兼容性很好，基本所有浏览器都兼容 
 
border-style拥有一下属性值 
值 描述
none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。 
这里主要使用border-style：double的小用法 
实例如下： 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>border-style:double</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        div{
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-bottom: 20px;
        }

        div.box1{
            height: 50px;
            border: 6px double red;
        }

        div.box2{
            height: 50px;
            border: 12px double red;
        }

        div.box3{
            height: 50px;
            border: 24px double red;
        }

    </style>
</head>
<body>
    <div class="box1">我是box1</div>

    <div class="box2">我是box2</div>

    <div class="box3">我是box3</div>
</body>
</html> 
效果如下： 
 
有图中咱可以看出“双线double” 实际上有三部分组成： 
  
也就是效果图中所示那样  
border-width 外框宽度 中间透明宽度 内框宽度
6px 2px 2px 2px
12px 4px 4px 4px
24px 8px 8px 8px 
 
我给定的border宽度正好是3的倍数，如果不是三的倍数，那么外框，中间，内框的宽度该如何分配呢？效果图如下： 
  
可以看出他们之间是有细微差别的，外框宽度、中间透明宽度、内框宽度之间相差1px。 
border-width 外框宽度 中间透明宽度 内框宽度
7px 2px 3px 2px
8px 3px 2px 3px
9px 3px 3px 3px 
 
border-style：double ；实用如下： 
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div.box{
            background-color: gray;
            padding: 20px;
        }
        div.nav{
            width: 30px;
            height: 4px;
            border-top: 12px double ;
            border-bottom: 4px solid black;
            color: red;
        }

        div.nav:hover{
            color: white;
            border-bottom-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="nav"></div>
    </div>
</body>
</html>

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

border-width	外框宽度	中间透明宽度	内框宽度
6px	2px	2px	2px
12px	4px	4px	4px
24px	8px	8px	8px

border-width	外框宽度	中间透明宽度	内框宽度
7px	2px	3px	2px
8px	3px	2px	3px
9px	3px	3px	3px

收起

展开全文

css

border详解
千次阅读 2017-10-17 09:08:01
1、border边框是外边距和内边距的分界线，在计算元素的宽和高的时候需要border的width计算在内。2、语法 border：border-style | border-color | border-width；3、样式效果展示:...
收起
css
border.css
千次阅读 2019-04-23 12:08:00
.border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { ...
收起
html中border的作用,border在html中是什么意思
千次阅读 2021-06-14 07:31:32
border在html中的意思：border属性是在一个声明中设置所有边框属性，语法为【Object.style.border=borderWidth borderStyle borderColor】。本教程操作环境：windows7系统、html5版，DELL G3电脑，该方法适用于所有...
收起
border 属性样式
千次阅读 2018-09-07 20:44:14
border: solid 1px; 实线边框 2.border: dotted 1px; 点划线边框 3.border: dashed 1px; 虚线边框 4.border: double 5px; 双线边框 border: none border：hidden；都是定义无边框，但是对于表来...
收起
flutter-border
千次阅读 2019-08-05 15:44:51
文章目录Border继承构造方法BorderStyle和BorderSideBorderStyleBorderSide构造方法BoxShadow构造方法 Border 继承 Object-> ShapeBorder-> BoxBorder-> Border 构造方法很简单的构造...
收起
flutter
border之border-width不支持百分比
千次阅读 2017-03-29 12:05:39
border-width不支持百分比在css中margin，padding是支持百分比的，但是border-width却不支持百分比，为什么margin，padding是可以支持的呢，只能从语义去分析border-width的属性意义呢，如手机屏的边框是5px,如果将...
收起
css
border-collapse 和 border-spacing
千次阅读 2017-08-04 14:01:31
border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框 separate 关键字，用于使用分隔的边框来绘制表格...
收起
table border 和css border的区别
千次阅读 2014-05-16 09:34:59
1 1 2 cool 1 1 2 border
收起
css table
border-collapse: collapse 和 border-radius同时使用border-radius不起作用
千次阅读 2018-06-27 16:52:35
这两个公用不起作用这是css本身存在的问题。解决办法：给table外层再包一层div,给div上设置border-radius和border。
收起
css样式
CSS 边框 border属性
千次阅读 2018-02-16 22:12:27
边框在CSS1中，就支持为元素添加边框，并可以设置边框的样式、颜色、及粗细。不过，当时的边框太过单一，只支持简单的线条...线条边框使用 border属性定义，图像边框使用 border-image 属性来定义，圆角边框使用 bo...
收起
CSS 边框
border：0;和border：none;的区别
千次阅读 2019-05-12 15:32:49
】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。【border:none;】把border设为“none”即没有，浏览器解析“none”时...
收起
sexlnsex!bord_如何在Internet Explorer 8及更低版本中启用CSS3 Border Radius
万次阅读 2020-06-09 06:18:35
CSS3使我们能够使用border-radius属性创建圆角。但是，您可能已经知道，Internet Explorer 8（IE8）及其早期版本无法识别此新功能。因此，当您将CSS3 Border Radius应用于元素时，它仍显示为带有尖头的方框。您...
收起
java python css html js
border-radius和border-image
千次阅读 2018-08-22 11:22:29
border-radius：一个值 5px --> 四个角都是5px 两个值 5px 10px --> 左上、右下5px，右上、左下10px 三个值 5px 10px 15px --> 左上5...
收起
table border重叠问题
千次阅读 2018-11-20 10:18:46
HTML中创建table时，设置border：...为了使border都为1，设置属性：语法：border-collapse : separate | collapse 取值： separate :　默认值。边框独立(标准HTML) collapse :　相邻边被合并 table { border-col...
收起
table
只显示border边框左右（上下）两边怎么写？
万次阅读 2019-04-09 17:49:59
border: 1px solid #000; border-style:none solid; 不建议使用（idea里面会爆黄并提示：属性边界被覆盖；属性边框样式重复属性边框）先设全边框，再取消上下边框的宽度 **border: 1px solid #000; border-width:...
收起
边框显示
CSS border 属性及用border画各种图形
千次阅读 2016-08-28 10:58:10
CSS border 属性定义和用法 border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性： border-widthborder-styleborder-color 如果不设置其中的某个值，也不会出问题，比如 border:solid ...
收起
border:none与border:0的区别
千次阅读 2015-05-10 17:37:10
border:none与border:0的区别主要有两点：（1）性能上的差异。（2）浏览器兼容差异。
收起
javascript
CSS渐变色边框，解决border设置渐变后，border-radius无效的问题
万次阅读 多人点赞 2018-11-01 13:19:27
通过border-image来实现渐变色边框 &amp;lt;div class=&quot;content&quot;&amp;gt;&amp;lt;/div&amp;gt; .content { width: 100px; height: 100px; border:...
收起
CSS中边框border属性、border-raduis圆角与border-image详解
千次阅读 2016-03-30 15:10:45
border-radius:25px 50px 50px 50px/50px 25px 50px 100px, 后面的数字是设置圆角的大小，参数分别代表左上角、右上角、右下角、左下角，“/”之后表示垂直（Y轴）半径，没有则表示与水平半径一样。 border-image:...
收起
关于使用border-image后，border-radius无效的问题
千次阅读 2019-09-23 18:47:13
在项目上使用border-image设置渐变边框后，发现border-radius的设置圆角边框无效解决方案：在当前的元素加一个父盒子，对父盒子使用背景渐变，然后，添加padding属性padding的值就是渐变颜色的边框的值，还要设置...
收起
CSS-Learning | 边框border和border-radius属性设置边框半径：圆角
千次阅读 2019-04-17 13:47:24
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，每个边框有 3 个方面：宽度、样式，以及颜色。可以使用border-width一次性设置所有边框的宽度，也可以使用border-top-width这样的方位属性设置某条...
收起
CSS radius
"border:0"与"border:none"的区别
千次阅读 2019-03-16 19:39:02
border:0"与"border:none"的差异主要体现在性能差异和兼容差异。 1.性能差异 "border:0"表示把border定义为0px。虽然0px在页面上看不到，但浏览器会对border进行渲染，结果会得到一个0px的...
收起
border消失问题
千次阅读 2018-09-07 00:20:40
有时候border是1px的宽度，但是用rem转换之后，在app里面显示是有问题的，所以一般border不要用rem来表示，就直接用1px。
收起
v
border-radius属性
千次阅读 2019-03-30 16:56:37
border-radius属性 ...border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，所以，border-radius :...
收起
-webkit-border-radius和-moz-border-radius
千次阅读 2017-12-14 16:53:46
这两个都是处理圆角效果的，但不是w3标准的。 w3标准的是border-radius， -webkit-border-radius 是为了兼容 chrome 或 safari， ...而现在火狐支持标准的border-radius，所以-moz-border-radius 是个无用的属性。
收起

从box-sizing:border-box属性入手，来了解盒模型

border-left、border-right、border-top、border-bottom深入理解

border-top、border-style、border-color属性的顺序

border之border-style用法

border-style

这里主要使用border-style：double的小用法

border详解

border.css

html中border的作用,border在html中是什么意思

border 属性样式

flutter-border

border之border-width不支持百分比

border-collapse 和 border-spacing

table border 和css border的区别

border-collapse: collapse 和 border-radius同时使用border-radius不起作用

CSS 边框 border属性

border：0;和border：none;的区别

sexlnsex!bord_如何在Internet Explorer 8及更低版本中启用CSS3 Border Radius

border-radius和border-image

table border重叠问题

只显示border边框左右（上下）两边怎么写？

CSS border 属性及用border画各种图形

border:none与border:0的区别

CSS渐变色边框，解决border设置渐变后，border-radius无效的问题

CSS中边框border属性、border-raduis圆角与border-image详解

关于使用border-image后，border-radius无效的问题

CSS-Learning | 边框border和border-radius属性设置边框半径：圆角

"border:0"与"border:none"的区别

border消失问题

border-radius属性

-webkit-border-radius和-moz-border-radius