用css制作div颜色与渐变

最新推荐文章于 2024-03-05 17:26:49 发布

原创最新推荐文章于 2024-03-05 17:26:49 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

这篇博客主要展示了如何使用CSS来创建div元素的颜色填充以及渐变效果，包括线性渐变和径向渐变的实现方法。通过实例代码，读者可以了解并掌握为div设置静态颜色和动态渐变背景的技巧。

今天太晚啦，先放代码明天再进行备注吧

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color:rgb(255,255,204);
}
div{
width:450px;
height:200px;
margin-top:10px;
margin-left:20px;
padding:3px;
color:white;
}
.s1{
width:100%;
height:100%;
display:box;
display:-webkit-box;
display:-moz-box;
}
.s2{
 background:linear-gradient(#0000ff,#ff0000);
        background:-moz-linear-gradient(#0000ff,#ff0000);
        background:-o-linear-gradient(#0000ff,#ff0000);
        background:-webkit-gradient(linear, left top, left bottom, from(#0000ff), to(#ff0000));
}
.s3 {
background:radial-gradient(center center,circle,#080,#ff0,#f00);
background:-webkit-radial-gradient(center center,circle,#080,#ff0,#f00);
background:-moz-radial-gradient(center center,circle,#080,#ff0,#f00);
}
.s4 {
background:radial-gradient(circle contain,#f0f,#ff0,#00f);
background:-webkit-radial-gradient(circle contain,#f0f,#ff0,#00f);
background:-moz-radial-gradient(circle contain,#f0f,#ff0,#00f);
}
</style>
</head>
<body>
<div class="s1">
<div class="s2">test1</div>
</div>
<div class="s1">
<div class="s3">test2</div>
<div class="s4">test3</div>
</div>
</body>
</html>

效果图：
在这里插入图片描述