CSS border outline
2021-06-19 本文已影响0人
微语博客
边框和轮廓
边框和轮廓是位于外边距内外的线框，有时候，设置边框和轮廓属性对于网页布局很有用，尤其是边框。
边框border
元素默认没有边框，当我们设置元素边框时显示，可以为边框设置大小，样式，颜色等属性，边框的复合属性是：border：width style color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{width: 100px;height: 100px;text-align: center;line-height: 100px;margin: 20px 20px;}
</style>
</head>
<body>
<!--边框大小颜色样式-->
<div class="container" style="border: 1px solid orangered;">Hello World</div>
<div class="container" style="border: 3px solid orange">Hello World</div>
<div class="container" style="border: 2px dashed orangered">Hello World</div>
<div class="container" style="border: 2px dotted orange">Hello World</div>
<!--边框圆角-->
<div class="container" style="border: 1px solid orangered;border-radius: 5px;">Hello World</div>
</body>
</html>
border属性设置边框，也可以单独设置某一边的边框，比如border-left等等。border-radius可以设置边框圆角，border-image也可以设置边框用图片填充。
轮廓outline
轮廓的设置和边框一样，轮廓是元素的外边界，轮廓复合属性是：outline：width style color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{width: 100px;height: 100px;text-align: center;line-height: 100px;margin: 20px 20px;}
</style>
</head>
<body>
<!--轮廓大小颜色样式-->
<div class="container" style="outline: 1px solid orangered;">Hello World</div>
<div class="container" style="outline: 3px solid orange">Hello World</div>
<div class="container" style="outline: 2px dashed orangered">Hello World</div>
<div class="container" style="outline: 2px dotted orange">Hello World</div>
</body>
</html>
轮廓设置基本上和边框一样，轮廓在边框和外边距之外。
