You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.1 KiB
77 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.gradient {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-image: linear-gradient(to right, red, blue);
|
|
}
|
|
|
|
.second-gradient {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-image: linear-gradient(55deg, red, blue, green);
|
|
}
|
|
|
|
.repeating-gradient {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-image: repeating-linear-gradient(red, green, blue 20%);
|
|
}
|
|
|
|
.second-repeating-gradient {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-image: repeating-linear-gradient(red, green 40%, blue 20%);
|
|
}
|
|
|
|
.radial-gradient {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-image: radial-gradient(circle, blue, red, green);
|
|
}
|
|
|
|
.repeating-radial-gradient {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-image: repeating-radial-gradient(blue, red, green 10%);
|
|
/* مقدار آخر درصد تکرار را مشخص میکند */
|
|
}
|
|
|
|
.border-image {
|
|
width: 600px;
|
|
height: 200px;
|
|
border: 15px solid transparent;
|
|
border-image-source: url('something');
|
|
border-image-repeat: round;
|
|
border-image-slice: 25;
|
|
border-image-width: 20px;
|
|
|
|
border-image: url('something') 25 round;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="gradient"></div>
|
|
<div class="second-gradient"></div>
|
|
<div class="repeating-gradient"></div>
|
|
<div class="second-repeating-gradient"></div>
|
|
<div class="radial-gradient"></div>
|
|
<div class="repeating-radial-gradient"></div>
|
|
<div class="border-image"></div>
|
|
</body>
|
|
|
|
</html> |