Блок

Блок

Свойство border-width используются для управления толщиной границ. Данное свойства может принимать значение в пикселях или одно из следующих значений.

thin;

medium;

thick.

Для этого свойства нельзя задавать значения в процентах. Вы можете устанавливать размер отдельных границ, используя следующие четыре свойства.

border-top-width;

border-right-width;

border-bottom-width;

border-left-width;

вы также можете указать разную толщину для четырех границ в одном свойстве.

border-width: 2px 1px 1px 2px;

В данном случае значения перечислены по часовой стрелке, верхняя, правая, нижняя и левая границы.


Отступы

<!DOCTYPE html>
<html>
<head>
<title>Отступы</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
width: 275px;
border: 2px solid #0088dd;}
p.example {
padding: 10px;}
</style>
</head>
<body>
<p>Аналоговые синтезаторы производят звуковые волны, а цифровые синтезаторы хранят записанные звуки в цифровом виде.</p>
<p class="example">Аналоговые синтезаторы производят звуковые волны, а цифровые синтезаторы хранят записанные звуки в цифровом виде.</p>
</body>
</html>

 

Центрирование контента

<!DOCTYPE html>
<html>
<head>
<title>Центрирование содержимого</title>
<style type="text/css">
body {
text-align: center;}
p {
width: 300px;
padding: 50px;
border: 20px solid #0088dd;}
p.example {
margin: 10px auto 10px auto;
text-align: left;}
</style>
</head>
<body>
<p>Говорят, что у аналоговых синтезаторов звук «теплее», чем у цифровых.</p>
<p class="example">Говорят, что у аналоговых синтезаторов звук «теплее», чем у цифровых.</p>
</body>
</html>

 

Меню

<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
li {
display: inline;
margin-right: 10px;}
li.coming-soon {
display: none;}
</style>
</head>
<body>
<ul>
<li>Домой</li>
<li>Товары</li>
<li class="coming-soon">Услуги</li>
<li>О нас</li>
<li>Контакты</li>
</ul>
</body>
</html>

 

Закрытие блоков

<!DOCTYPE html>
<html>
<head>
<title>Visibility</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
li {
display: inline;
margin-right: 10px;}
li.coming-soon {
visibility: hidden;}
</style>
</head>
<body>
<ul>
<li>Домой</li>
<li>Товары</li>
<li class="coming-soon">Услуги</li>
<li>О нас</li>
<li>Контакты</li>
</ul>
</body>
</html>

Тени блоков

<!DOCTYPE html>
<html>
<head>
<title>Тень от рамок</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background-color: #e1ddda;
margin: 20px;
display: inline-block;}
p.one {
-moz-box-shadow: -5px -5px #777777;
-webkit-box-shadow: -5px -5px #777777;
box-shadow: -5px -5px #777777;}
p.two {
-moz-box-shadow: 5px 5px 5px #777777;
-webkit-box-shadow: 5px 5px 5px #777777;
box-shadow: 5px 5px 5px #777777;}
p.three {
-moz-box-shadow: 5px 5px 5px 5px #777777;
-webkit-box-shadow: 5px 5px 5px 5px #777777;
box-shadow: 5px 5px 5px 5px #777777;}
p.four {
-moz-box-shadow: 0 0 10px #777777;
-webkit-box-shadow: 0 0 10px #777777;
box-shadow: 0 0 10px #777777;}
p.five {
-moz-box-shadow: inset 0 0 10px #777777;
-webkit-box-shadow: inset 0 0 10px #777777;
box-shadow: inset 0 0 10px #777777;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<br />
<p class="four"></p>
<p class="five"></p>
</body>
</html>

 

Закругленные углы

<!DOCTYPE html>
<html>
<head>
<title>Закругленные углы</title>
<style type="text/css">
p {
border: 5px solid #ee3e80;
padding: 20px;
width: 275px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}
</style>
</head>
<body>
<p>При записи альбома Pet Sounds был использован целый ряд нетрадиционных инструментов, таких как звонок велосипеда, орган, клавесин, флейты, свисток для собак, поезд, струнные инструменты с характерным гавайским звучанием, банки из-под Кока-Колы и лающие собаки.</p>
</body>
</html>

 

Эллиптические формы

<!DOCTYPE html>
<html>
<head>
<title>Эллиптические формы</title>
<style type="text/css">
p {
border: 5px solid #ee3e80;
padding: 10px;
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;}
p.one {
border-top-left-radius: 80px 50px;
-moz-border-radius-top-left: 80px 50px;
-webkit-border-radius-top-left: 80px 50px;}
p.two {
border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;}
p.three {
padding: 0px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
</body>
</html>
Понравилась статья? Поделиться с друзьями:
Блог Измайлова Павла
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: