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

边框样式1.概述我们之前已经把CSS的选择器学习了一遍，接下来，我们就一起来学习一下一些常见的样式属性，我们从边框样式开始学习。2.边框样式CSS中使用关键字border实现指定元素边框的样式、宽度和颜色。3.边框的常用属性边框border常用的属性1.border-style:设置边框的样式，其常用的样式有:none(无边框)soild(实线边框)dashed(虚线边框...

魔笛手7

8574人浏览 · 2021-12-14 15:43:01

魔笛手7 · 2021-12-14 15:43:01 发布

边框样式

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>