Оформление “контуров”, ограничивающих границы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Контуры</title>
<style>
* {
margin: 0;
}
body {
margin: 20px;
padding: 20px;
}
h1 {
font-size: 80px;
}
pre {
padding: 20px;
border: 20px dotted;
outline: 20px solid red;
margin: 40px 0;
}
p {
font-size: 40px;
outline-color: #999;
outline-style: dashed;
outline-width: thin;
margin: 40px 0;
}
p strong {
outline: 20px double rgba(0,255,0,.2);
}
#borderCollie {
outline: 0;
}
#borderCollie a {
outline: medium solid rgba(0,0,255,.1);
transition: outline 1s;
}
#borderCollie a:hover {
outline: 400px solid rgba(0,0,255,.9);
}
</style>
</head>
<body>
<h1>Outlines</h1>
<pre><code>padding: 20px;
border: 20px dotted;
outline: 20px solid red;</code></pre>
<p>Ширина, стиль и цвет контура вокруг прямоугольника. Контур отображается по внешней стороне границы прямоугольника. <strong>Это не влияет на размер или положение поля или любого другого поля.</strong></p>
</body>
</html>Страницы в тему:
