css学习日志 linear-gradient渐变
2019-08-13 本文已影响0人
smallzip
css学习日志：
1.linear-gradient的使用，制作徽章，或者箭头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>linear-gradient</title>
<style>
.container {
flex: 1;
width: 100px;
height: 500px;
background: #580;
background:
linear-gradient(45deg, transparent 50px, #580 0) top right,
linear-gradient(-45deg, transparent 50px, #580 0) top left,
linear-gradient(-45deg, transparent 50px, #580 0) bottom right,
linear-gradient(45deg, transparent 50px, #580 0) bottom left;
background-repeat: no-repeat;
background-size: 50% 50%;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
效果：
徽章和箭头
2.中心三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
flex: 1;
/* column-gap: 20px;
column-count: 3; */
width: 500px;
height: 500px;
background: #580;
background:
linear-gradient(45deg, transparent 50px, #580 0) top right,
linear-gradient(-45deg, transparent 50px, #580 0) top left,
linear-gradient(-45deg, transparent 50px, #580 0) bottom right,
linear-gradient(45deg, transparent 50px, #580 0) bottom left;
background-repeat: no-repeat;
background-size: 50% 50%;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
效果:
中心三角形
3.色调渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
flex: 1;
width: 500px;
height: 500px;
border-radius: 50%;
background: conic-gradient(red, yellow,lime,aqua,blue,fuchsia,red);
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
效果：
微信截图_20190813154650.png
4.酒杯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
flex: 1;
width: 500px;
height: 500px;
background: #580;
background:
linear-gradient(135deg, transparent 50px, #580 0) top right,
linear-gradient(-135deg, transparent 50px, #580 0) top left,
linear-gradient(-45deg, transparent 50px, #580 0) bottom right,
linear-gradient(45deg, transparent 50px, #580 0) bottom left;
background-repeat: no-repeat;
background-size: 50% 50%;
}
</style>
</head>
<body>
<div class="container"> </div>
</body>
</html>
效果：
微信截图_20190813154822.png
5.切四个角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
flex: 1;
width: 500px;
height: 500px;
background: #580;
background:
linear-gradient(-135deg, transparent 50px, #580 0) top right,
linear-gradient(135deg, transparent 50px, #580 0) top left,
linear-gradient(-45deg, transparent 50px, #580 0) bottom right,
linear-gradient(45deg, transparent 50px, #580 0) bottom left;
background-repeat: no-repeat;
background-size: 50% 50%;
}
</style>
</head>
<body>
<div class="container"> </div>
</body>
</html>
效果:
微信截图_20190813155036.png
6.棋盘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
column-gap: 20px;
column-count: 3;
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>Simple multicol example</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate.
Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
egestas ligula.
Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
blandit
quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique
elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
velit
cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et
magnis
dis parturient montes, nascetur ridiculus mus.</p>
</div>
</body>
</html>
效果：
微信截图_20190813155354.png
7.切角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
column-gap: 20px;
column-count: 3;
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>Simple multicol example</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate.
Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
egestas ligula.
Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
blandit
quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique
elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
velit
cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et
magnis
dis parturient montes, nascetur ridiculus mus.</p>
</div>
</body>
</html>
效果：
微信截图_20190813155554.png
8.点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
column-gap: 20px;
column-count: 3;
background: #eee;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>Simple multicol example</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate.
Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
egestas ligula.
Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
blandit
quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique
elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
velit
cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et
magnis
dis parturient montes, nascetur ridiculus mus.</p>
</div>
</body>
</html>
效果：
微信截图_20190813155807.png
9.半切渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
column-gap: 20px;
column-count: 3;
background: repeating-linear-gradient(45deg,#fb3, #58a 10%);
}
</style>
</head>
<body>
<div class="container">
<h1>Simple multicol example</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate.
Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
egestas ligula.
Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
blandit
quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique
elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
velit
cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et
magnis
dis parturient montes, nascetur ridiculus mus.</p>
</div>
</body>
</html>
效果：
微信截图_20190813155933.png
10.svg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>svg</title>
<style>
.container {
flex: 1;
height: 800px;
display: flex;
justify-content: center;
align-items:center;
}
circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 100;
stroke-dasharray: 20 10;
}
</style>
</head>
<body>
<div class="container">
<svg width="1000" height="800">
<circle r="200" cx="250" cy="250"></circle>
</svg>
</div>
</body>
</html>
效果：
3.gif
- 弧形切角
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
.container {
flex: 1;
width: 500px;
height: 500px;
border-radius: 50%;
background: conic-gradient(red, yellow,lime,aqua,blue,fuchsia,red);
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
效果：
内切
