Hàm radial-gradient() circle (hình tròn) trong CSS
Hàm radial-gradient() circle (hình tròn) trong CSS
Hàm radial-gradient() circle (hình tròn) trong CSS
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html>
<html>
<head>
<title>Hàm radial-gradient() circle (hình tròn) trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:200px; float: left; height:150px; margin-bottom:10px; margin-right:10px}
h4{margin:0px;padding:0px}
hr {width:100%}
</style>
</head>
<body>
<h1>Hàm radial-gradient() circle (hình tròn) trong CSS</h1>
<h4>background-image: radial-gradient(circle at center, red, blue); Hình tròn, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương</h4>
<div style="background-image: radial-gradient(circle at center, red, blue);"></div><hr>
<h4>background-image: radial-gradient(circle closest-side at center, red, blue, green); Hình tròn, loại kích thước closest-side, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle closest-side at center, red, blue, green);"></div><hr>
<h4>background-image: radial-gradient(circle at left, red, blue, green); Hình tròn, vị trí tâm nằm bên trái, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle at left, red, blue, green);"></div><hr>
<h4>background-image: radial-gradient(circle at center, red 10%, blue, green Hình tròn, vị trí tâm nằm ở giữa, chuyển từ màu đỏ (10%) sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle at center, red 10%, blue, green"></div><hr>
<h4>mask: radial-gradient(circle at center, black 50%, rgba(0, 0, 0, 0.5) 50%); Hình tròn, vị trí ở giữa, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask: radial-gradient(circle at center, black 50%, rgba(0, 0, 0, 0.5) 50%);height:auto">
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</div>
<hr>
<p>Hình gốc</p>
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Hàm radial-gradient() circle (hình tròn) trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:200px; float: left; height:150px; margin-bottom:10px; margin-right:10px}
h4{margin:0px;padding:0px}
hr {width:100%}
</style>
</head>
<body>
<h1>Hàm radial-gradient() circle (hình tròn) trong CSS</h1>
<h4>background-image: radial-gradient(circle at center, red, blue); Hình tròn, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương</h4>
<div style="background-image: radial-gradient(circle at center, red, blue);"></div><hr>
<h4>background-image: radial-gradient(circle closest-side at center, red, blue, green); Hình tròn, loại kích thước closest-side, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle closest-side at center, red, blue, green);"></div><hr>
<h4>background-image: radial-gradient(circle at left, red, blue, green); Hình tròn, vị trí tâm nằm bên trái, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle at left, red, blue, green);"></div><hr>
<h4>background-image: radial-gradient(circle at center, red 10%, blue, green Hình tròn, vị trí tâm nằm ở giữa, chuyển từ màu đỏ (10%) sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle at center, red 10%, blue, green"></div><hr>
<h4>mask: radial-gradient(circle at center, black 50%, rgba(0, 0, 0, 0.5) 50%); Hình tròn, vị trí ở giữa, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask: radial-gradient(circle at center, black 50%, rgba(0, 0, 0, 0.5) 50%);height:auto">
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</div>
<hr>
<p>Hình gốc</p>
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</body>
</html>Hàm radial-gradient() circle (hình tròn) trong CSS nằm trong bài viết Hàm radial-gradient() trong CSS
