整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人可能会疑惑，我为什么专门用一节内容来说边框和圆角。其实，不为别的，只为它们在开发中，在Web系统中，在手机页面中，太常用了。有边框的页面，让人耳目一新，一目了然；有圆角的内容，让人赏心悦目，心旷神怡。说的有点夸张了，就这么着吧。
边框(border)一般为长方形形状，有上下左右四条边，CSS边框属性允许你指定一个元素边框的样式和颜色。CSS的圆角(border-radius)方法，可给任何元素制作 "圆角"效果。
在CSS中，你可以通过border和其延伸的，如border-style，来实现边框的效果。上边框相关的有border-top-style样式、border-top-color颜色、border-top-width宽度和组合了它们的border-top。下、左右边框类似，换成对应的单词即可。
边框样式(border-style)常用的有dotted(点线)、dashed(虚线)、solid(实线)、double(双边框)这四种，不常用的有groove(3D沟槽)、ridge(3D脊边)、inset(3D嵌入)和outset(3D突出)。
/* --------在样式表文件中---------- */
/*4条边框一起设置*/
.four-border {
width: 800px;
border: 2px solid darkgreen;;
}
/*四条边框可个性化*/
.four-style {
width: 800px;
/* 上、右、下、左*/
border-width: 1px 2px 3px 4px;
/*上、右左、下*/
border-style: solid dashed double;
/*上下和右左*/
border-color: darkgreen coral;
}
/*单条边框设置*/
.one-style {
width: 800px;
border-top: 1px groove orangered;
border-bottom-width: 5px;
border-bottom-style: inset;
border-bottom-color: darkgreen;
}HTML文件内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框逼格</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
border统一设置四条边框<br/>
顺序为：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
四条边框一起设置，风格可不同<br/>
顺序为:上、右、下、左。<br/>
1. 只有一个值(如：border-width:2px)：表示4条边框全部一样；<br/>
2. 有两个值(如：border-width:2px 3px)：表示上下和右左;<br/>
3. 有三个值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
4. 有四个值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
单独一天边框进行设置<br/>
border-top：顶部宽度、样式、颜色，一起设置<br/>
border-top-width:上边框宽度；<br/>
border-top-style:上边框样式；<br/>
border-top-color:上边框颜色。
<br/>
</div>
</body>
</html>输出结果
使用CSS的border-radius 属性，你可以给任何元素制作 "圆角"。 border-radius统一指定4个圆角，顺序为左上、右上、右下和左下。如果要特定指定某个角的话，用border-top-left-radius等方式即可。
在样式表ys2.css文中的内容
/*4个角统一指定*/
.four-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-radius: 15px;
vertical-align: middle;
text-align: center;
}
/*单独指定一个角*/
.one-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-top-left-radius: 15px;
border-bottom-right-radius: 50px;
vertical-align: middle;
text-align: center;
}在HTML文件中的内容
<br/><br/>
<div class="four-radius">
统一设置4个圆角<br/>
一个值： 四个圆角值相同;<br/>
两个值: 左上角与右下角，右上角与左下角;<br/>
三个值: 左上角, 右上角和左下角，右下角;<br/>
四个值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
单独指定某个角<br/>
border-top-left-radius：左上角;<br/>
border-top-right-radius：右上角;<br/>
border-bottom-right-radius：右下角;<br/>
border-bottom-left-radius：左下角。
</div>输出结果
不要重复造轮子，所以好多程序员一遇到问题，就喜欢搜索，我也是，哈哈哈~。CSS有指定边框的属性，也有圆角的属性，将其放在一起，是不是就可以实现圆角边框?答案毋庸置疑，答案是肯定的。
在样式表ys2.css文件中的内容
/*圆角边框*/
.corners {
border-radius: 50px;
border: 3px solid #8AC007;
padding: 50px;
width: 720px;
line-height: 50px;
vertical-align: middle;
text-align: center;
}在HTML文件中的内容
<div class="corners">
边框属性和圆角属性，组合成圆角边框
</div>输出结果
好了，有关CSS的圆角边框内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##CSS##程序员##Web#
信我或关注微信号：狮范儿，回复：学习，获取免费学习资源包。
在我们平时网页中，想必大家一定用过border，可以根据border给我们提供的各种属性实现盒子的边框效果，那么今天就给大家分享一下边框的应用。
01
常规姿势
在CSS1中就定义了边框样式属性：border设置全部或指定具体边框样式。具体包括指定样式：宽度：width、样式：style（none、solid、dotted、dashed等）、颜色：color。可以通过border统一设置边框样式，也可以通过border-left:width style color独立设置边框样式。这部分相对比较简单，下面我们来使用div示例及样式展示一下基本设置方法：
02
特殊姿势
我们都知道，标准盒子模型的大小会受content（width,height）、padding、border的影响，所以，即使一个盒子未设置内容大小，只要有边框或内边距，盒子也是会有大小的。我们就从这里出发，假若盒子未设置宽度和高度，我们给盒子增加了边框大小为10px,给每边边框设置不同的颜色来看一下：
假使只有上边框有颜色，其他边框的颜色均为透明：
此时我们就会得到一个三角小图标，是不是感觉很神奇。
再比如，我们给盒子设置width，再来观察下，你就会发现你得到了一个梯形。
03
借助其他样式合并输出姿势
border边框还能与border-radius一起来做出我们希望效果。例如：
再做一个月亮给你呀：
再送你一朵小花花：
最后做一个火热的爱心送给你呀~~
私信我或关注微信号：狮范儿，回复：学习，获取免费学习资源包。
天，分享一波唯美的边框，可增加我们的项目"亮"点，让用户爱起来。
事例地址：https://codepen.io/mike-schultz/pen/NgQvGO
事例地址：https://codepen.io/uiswarup/pen/RBByzW
事例地址：https://codepen.io/giana/pen/yYBpVY
事例地址：https://codepen.io/ZachSaucier/pen/kyGqm
事例地址：https://codepen.io/tmrDevelops/pen/VeRvKX
事例地址：https://codepen.io/Mamboleoo/pen/zYOJOGb
事例地址：https://codepen.io/electerious/pen/qPjbGm
事例地址：https://codepen.io/chriscoyier/pen/PXNPRq
事例地址：https://codepen.io/Varin/pen/XjagZv
事例地址：https://codepen.io/Zeindelf/pen/vZbyEg
事例地址：https://codepen.io/pavger/pen/bNrxrj
事例地址：https://codepen.io/jessedean/pen/BzjweX
事例地址：https://codepen.io/coreybullman/pen/yJoZVQ
事例地址：https://codepen.io/aniketkudale/pen/PoqmexO
事例地址：https://codepen.io/fixcl/pen/lemjw
事例地址：https://codepen.io/yukulele/pen/AjFBs
事例地址：https://codepen.io/fossheim/pen/LYVOBRZ
事例地址：https://codepen.io/HYPNOS/pen/GFxoC
事例地址：https://codepen.io/4815162342/pen/NaLdNx
所有源码可关注《JavaScript 每日一练》 后台回复 css20 获取
~~完，我是刷碗，励志等退休后，要回家摆地摊的人，我们下期见！
作者：niemvuilaptrin 译者：前端小智 来源：medium 原文：https://niemvuilaptnh.medium.com/23-border-css-javasript-beautiful-in-website-7286a05e0ad7
*请认真填写需求信息，我们会在24小时内与您取得联系。
