html圆角表格样式第11天｜16天搞定前端CSS的圆角边框让人心旷神怡

边框(border)一样平常为长方形形状，有高下旁边四条边，CSS边框属性许可你指定一个元素边框的样式和颜色。
CSS的圆角(border-radius)方法，可给任何元素制作 "圆角"效果。

11.1 边框逼格

在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突出)。

html圆角表格样式第11天｜16天搞定前端CSS的圆角边框让人心旷神怡 JavaScript

/ --------在样式表文件中---------- //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>

输出结果

11.2 圆角风格

利用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>

输出结果

11.3 圆角边框

不要重复造轮子，以是好多程序员一碰着问题，就喜好搜索，我也是，哈哈哈~。
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的圆角边框内容，老陈讲完了，如果以为对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。
你的转发和点赞，便是对老陈连续创作和分享最大的鼓励。