HTML CSS Упражнение: Создание линейных, радиальных, повторяющихся линейных и повторяющихся радиальных градиентов с помощью CSS3
Решение:
HTML-код:
<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - create linear, radial, repeating linear and repeating radial gradients with CSS3</title>
<style type="text/css">
.container{
text-align:center;
padding:20px 0;
width:960px;
margin: 0 auto;
}
.container div{
width:200px;
height:150px;
display:inline-block;
margin:2px;
color:#ec8007;
vertical-align: top;
line-height: 230px;
font-size: 20px;
}
.linear{
background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
}
.radial{
background:radial-gradient(#4b6c9c,#5ac4ed);
}
.repeating-linear{
background:repeating-linear-gradient(-45deg, #4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
}
.repeating-radial{
background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
}
</style>
</head>
<body>
<div class="container">
<div class="linear">Linear</div>
<div class="radial">Radial</div>
<div class="repeating-linear">Repeating Linear</div>
<div class="repeating-radial">Repeating Radial</div>
</div>
</body>
</html>
Демонстрация в реальном времени:
См. Pen create-Gradient-with-css-answer от w3resource ( @ w3resource ) в CodePen .
Поддерживаемый браузер
 |  |  |  |  |
| да | да | да | да | да |
Каков уровень сложности этого упражнения?
Новый контент: Composer: менеджер зависимостей для PHP , R программирования
disqus2code