本文详细介绍了HTML中边框属性的设置，包括边框宽度、颜色、样式和方向，以及如何创建圆角边框，通过实例展示了不同参数的组合效果，包括设置边框阴影和轮廓，最后提到了CSS重置样式在消除默认边框样式中的应用。
第八章 边框属性
8-01 边框设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框设置</title>
<style type="text/css">
div{
width: 200px;height: 100px;line-height: 100px;text-align: center;
background: #008000;
border-top: 4px red solid;
}
</style>
</head>
<body>
<!--边框要素：-->
<!--
1.边框宽度：
2.边框颜色：
3.边框样式：
4.边框方向：
-->
<div>我要自学网</div>
</body>
</html>
8-02 边框宽度和边框颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框宽度和边框颜色</title>
<style type="text/css">
div{
width: 200px;height: 100px;line-height: 100px;text-align: center;
background: #008000;
/*border-top: 1px red solid;*/
border-top: 1em rgb(255,0,0) solid;
}
</style>
</head>
<body>
<!--边框要素：-->
<!--
1.边框宽度：
2.边框颜色：
3.边框样式：
4.边框方向：
-->
<!--边框设置-->
<!--1.语法：border-边框方向：边框宽度 边框颜色 边框样式； 属性值之间有空格隔开-->
<!--2.边框宽度：可以使用合法的尺寸单位：px,em,rem。 特别注意：%不能使用。 推荐使用像素（px）单位-->
<!--3.边框颜色：可以使用颜色名，16进制颜色值，rgb颜色，rgba颜色. 推荐使用16进制颜色值和rgb，rgba颜色-->
<div>我要自学网</div>
</body>
</html>
8-03 边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框样式</title>
<style type="text/css">
div{
width: 200px;height: 100px;line-height: 100px;text-align: center;
background: #008000;
/*border-top: 1px red solid;*/
/*border-top: 4px #FF0000 solod;*/ /*实线*/
/*border-top: 4px #FF0000 dashed;*/ /*虚线*/
/*border-top: 4px #FF0000 double;*/ /*双线*/
/*border-top: 4px #FF0000 dotted;*/ /*点状线*/
border-top: #FF0000 4px dotted;
}
</style>
</head>
<body>
<!--边框要素：-->
<!--
1.边框宽度：
2.边框颜色：
3.边框样式：
4.边框方向：
-->
<!--边框设置-->
<!--1.语法：border-边框方向：边框宽度 边框颜色 边框样式；
属性值之间有空格隔开。属性值可以互换位置-->
<!--2.边框宽度：可以使用合法的尺寸单位：px,em,rem。 特别注意：%不能使用。 推荐使用像素（px）单位-->
<!--3.边框颜色：可以使用颜色名，16进制颜色值，rgb颜色，rgba颜色. 推荐使用16进制颜色值和rgb，rgba颜色-->
<!--4.边框样式：
实线 ：solid;
虚线：dashed;
双线： double;
点状：dotted; -->
<div>我要自学网</div>
</body>
</html>
8-04 边框方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框方向</title>
<style type="text/css">
div{
width: 200px;height: 100px;line-height: 100px;text-align: center;
background: #008000;
/*border-top: 4px red solid;*/
/*border-bottom: 4px blue dashed;*/
/*border-left: 4px yellow double;*/
/*border-right: 4px black dotted;*/
border: 4px red solid;
border: 5px #ff00ff solid;
}
</style>
</head>
<body>
<!--边框要素：-->
<!--
1.边框宽度：
2.边框颜色：
3.边框样式：
4.边框方向：
-->
<!--边框设置-->
<!--1.语法：border-边框方向：边框宽度 边框颜色 边框样式；
属性值之间有空格隔开。属性值可以互换位置-->
<!--2.边框宽度：可以使用合法的尺寸单位：px,em,rem。 特别注意：%不能使用。 推荐使用像素（px）单位-->
<!--3.边框颜色：可以使用颜色名，16进制颜色值，rgb颜色，rgba颜色. 推荐使用16进制颜色值和rgb，rgba颜色-->
<!--4.边框样式：
实线 ：solid;
虚线：dashed;
双线： double;
点状：dotted; -->
<!--5.边框方向：写在属性名中，在border-之后。-->
<!--上：top;
下：bottom;
左：left;
右：right;-->
<!--6.四个方向设置一样的边框-->
<!--border: 边框宽度 边框颜色 边框样式;-->
<div>我要自学网</div>
</body>
</html>
8-05 圆角边框两大要素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆角边框两大要素</title>
<style type="text/css">
div{
width: 200px;height: 100px;line-height: 100px;text-align: center;
background: #008000;
border: 5px #ff0000 solid;
}
</style>
</head>
<body>
<!--圆角要素：-->
<!--
1.圆角方向：通过垂直和水平方向可以表示一个角
方向1：上下 方向2：左右
2.圆角半径：
水平半径 垂直半径
-->
<div>我要自学网</div>
</body>
</html>
8-06 圆角边框设置1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆角边框设置1</title>
<style type="text/css">
div{
width: 200px;height: 100px;line-height: 100px;text-align: center;
background: #008000;
border: 4px #ff0000 solid;
border-top-left-radius: 20px 30px;
}
</style>
</head>
<body>
<!--圆角要素：-->
<!--
1.圆角方向：通过垂直和水平方向可以表示一个角
注意：先垂直方向，再水平方向
方向1：上下 方向2：左右
2.圆角半径：
水平半径 垂直半径
-->
<!--边框设置-->
<!--1.语法：border-垂直方向-水平方向-radius: 水平半径 垂直半径;
属性值之间有空格隔开。属性值可以互换位置-->
<!--2.垂直方向：上top 下bottom-->
<!--3.水平方向：左left 右right-->
<!--4.水平半径和垂直半径的值：可以使用合法的尺寸单位：如px,em,rem，还可以使用% -->
<div>我要自学网</div>
</body>
</html>
8-07 圆角边框设置2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆角边框设置1</title>
<style type="text/css">
div{
width: 200px;height: 200px;line-height: 200px;text-align: center;
background: #008000;
/*border: 4px #ff0000 solid;*/
/*border-top-left-radius: 20px 30px;*/
/*border-top-left-radius: 20px 20px;*/
/*border-top-left-radius: 20px;*/ /*只设置一个半径也可*/
/*border-top-left-radius: 20% 20%;*/
/*当元素的宽和高一样时,使用50%即可变成圆形*/
/*border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;*/
/*border-radius: 10px 20px 30px 40px;*/ /*同时设置四个圆角*/
/*border-radius: 10px 20px 30px;*/ /*右上和左下角一样，左上和右下不一样*/
/*border-radius: 10px 30px;*/ /*对称角一样*/
/*border-radius: 30px;*/ /*四个角一样*/
}
</style>
</head>
<body>
<!--圆角要素：-->
<!--
1.圆角方向：通过垂直和水平方向可以表示一个角
注意：先垂直方向，再水平方向
方向1：上下 方向2：左右
2.圆角半径：
水平半径 垂直半径
-->
<!--边框设置-->
<!--1.语法：border-垂直方向-水平方向-radius: 水平半径 垂直半径;
属性值之间有空格隔开。属性值可以互换位置-->
<!--2.垂直方向：上top 下bottom-->
<!--3.水平方向：左left 右right-->
<!--4.水平半径和垂直半径的值：可以使用合法的尺寸单位：如px,em,rem，还可以使用% -->
<!--5.当圆角半径设置成一个值时，另一个值和设置的值一样-->
<!--6.当使用百分比设置半径时，半径的值是元素宽度或高度的百分比-->
<!--同时设置4个圆角边框-->
<!--1.border-radius:上左角 上右角 下右角 下左角-->
<!--border-radius: 10px 20px 30px 40px;-->
<!--从上左角到下右角顺时针排列-->
<!--2.1.border-radius:上左角 上右角和下左角 下右角-->
<!--border-radius: 10px 20px 30px;-->
<!--3.1.border-radius:上左角和下右角 上右角和下左角 -->
<!--border-radius: 10px 30px;-->
<!--4.1.border-radius:四个角一样 -->
<!--border-radius: 10px;-->
<div>我要自学网</div>
</body>
</html>
8-08 边框阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框阴影</title>
<style type="text/css">
img{
/*box-shadow: 2px 2px 5px 20px #ccc;*/
box-shadow: 1px 1px 1px 1px #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<!--边框阴影：-->
<!--box-shadow: 值1 值2 值3 值4;-->
<!--值1:水平阴影位置 必须的值。设置成正值时，阴影在右；负值时，阴影在左-->
<!--值2:垂直阴影位置 必须的值。设置成正值时，阴影在下；负值时，阴影在上-->
<!--值3:阴影模糊距离，可选值 -->
<!--值4:阴影尺寸，可选值-->
<!--值5:阴影颜色 合法颜色值。可选，默认黑色-->
<img src="1.png"/>
</body>
</html>
8-09 轮廓及样式重置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮廓及样式重置</title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
div{
width: 150px; height: 100px;background: blueviolet;
border: 2px solid red;
border-radius: 10px;
box-shadow: 1px 1px 1px grey;
outline: 4px solid black;
}
</style>
</head>
<body>
<!--轮廓设置：-->
<!--outline: 边框宽度 边框颜色 边框样式;-->
<!--轮廓会加在边框之外-->
<!--<div></div>-->
<!--轮廓样式重置，在reset.css中-->
<input type="text" name="" id="" value="" />
<br />
<textarea name="" rows="" cols=""></textarea>
<select name="">
<option value=""></option>
</select>
</body>
</html>
reset.css
body{font-size: 16px;font-family: "微软雅黑";color: #333333;}
b{font-weight: normal;}
i{font-style: normal;}
a,a:hover,a:active{text-decoration: none;color: #000000;}
textarea,input,select{outline: none;}
扫一扫
553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
