前端开发_HTML5_CSS部分-边框(border)

本文主要是介绍前端开发_HTML5_CSS部分-边框(border)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

边框样式

1.概述

我们之前已经把CSS的选择器学习了一遍，接下来，我们就一起来学习一下一些常见的样式属性，我们从边框样式开始学习。

2.边框样式

CSS中使用关键字border实现指定元素边框的样式、宽度和颜色。

3.边框的常用属性

边框border常用的属性1.border-style:设置边框的样式，其常用的样式有:none(无边框)soild(实线边框)dashed(虚线边框)dotted(点线边框)double(双边框)2.border-width:设置边框的宽度，一般使用px作为单位即可，值一般使用:1px。3.border-color:设置边框的颜色，可以使用颜色关键字，如:red;可以使用HEX,如:#000000,也可以使用 rgb,如:rgb(255,0,0)。 4.border:复合属性，可以指定border的所有内容。如:border:1px soild black;5.border-radius：用于设置圆角边框,由于给任何一个元素添加圆角效果都有四个角，所以边框的圆角效果受到 参数的影响。(1).border-radius:5px;    //四个角的圆角效果都是使用5px(2).border-radius:5px 10px;  //左上、右下:5px,左下、右上：10px(3).border-radius:5px 10px 15px;  //左上:5px,左下、右上:10px,右下:15px(4).border-radius:5px 10px 15px 20px;  //左上:5px,右上10px,右下:15px,左下:20px

4、边框属性的使用代码示例以及效果

<style type="text/css">.box1{border-style: solid;width: 150px;height: 150px;}.box2{border-width: 1px;border-style: dashed;width: 150px;height: 150px;}.box3{border-width: 1px;border-style: solid;color: red;width: 150px;height: 150px;}.box4{width: 150px;height: 150px;border: 1px solid #ff55ff;}.box5 {width: 150px;height: 150px;border: 1px solid #ff55ff;border-radius: 10px 20px;}</style><body><div class="box1">设置边框样式</div><br><div class="box2">设置边框宽度</div><br><div class="box3">设置边框颜色</div><br><div class="box4">复合属性设置</div><br><div class="box5">复合属性设置 + 圆角边框</div>
</body>