css渐变两个图形,css渐变两个图形不一样
小白求教:css中如何将圆形渐变成心形？
1、用css画一个圆形
.disc1{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin:300px 0px 0px 300px;
? ? border-radius:100%;
? ? float:left;
}
2、由于爱心是由两个圆和一个正方形组成的，所以还需要再来一个圆形
.disc2{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin:250px 0px 0px 0px;
? ? border-radius:100%;
? ? float:left;
? ? position: relative;
? ? right: 50px;
}
3、心型下方就需要做一个正方形
.square{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin: 300px 0px 0px 0px;
? ? float: left;
? ? position: relative;
? ? right: 152px;
}
4、做完这些的效果已经基本上出来了，但是还需要调整一下爱心的角度，这时就需要用到css样式中的transform中的rotate属性了。
由于需要把三个div都旋转角度，所以把这三个div放在一个div里面。具体代码如下：
.main{
transform: rotate(45deg);
margin: 300px;
}
全部代码如下
!DOCTYPE html
html
? ? head
? ? ? ? meta charset="utf-8" /
? ? ? ? title/title
style type="text/css"
*{
? ? margin: 0px;
? ? padding: 0px;
}
.main{
? ? transform: rotate(45deg);
? ? margin: 300px;
}
.disc1{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin:300px 0px 0px 300px;
? ? border-radius:100%;
? ? float:left;
}
.disc2{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin:250px 0px 0px 0px;
? ? border-radius:100%;
? ? float:left;
? ? position: relative;
? ? right: 50px;
}
.square{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin: 300px 0px 0px 0px;
? ? float: left;
? ? position: relative;
? ? right: 152px;
}
/style
? ? /head
? ? body
? ? ? ? div class="main"
? ? ? ? ? ? div class="disc1"/div
? ? ? ? ? ? div class="disc2"/div
? ? ? ? ? ? div class="square"/div
? ? ? ? /div
? ? /body
/html
求CSS图片渐变效果实现方法(有图)（需要处理一批该图片，左边为原图，右边为目标样图）
在图片上面盖个层，写个线性渐变
.mask{
??height:100%;
??background:?-webkit-linear-gradient(transparent,?#fff);
??background:?-o-linear-gradient(transparent,?#fff);
??background:?-moz-linear-gradient(transparent,?#fff);
??background:?linear-gradient(transparent,?#fff);
}
渐变的更多用法可以直接搜css linear-gradient
css里能同时定义两个背景吗？怎么用css做渐变的背景
CSS不可以同时定义两个背景，不过你可以嵌套一下，比如：在div里面嵌套一个span，然后可以分别设置背景，以达到自己想要的效果。
做渐变的背景，要突破浏览器的限制，建议用图片做，先在PS 里面根据需要（纵向或横向）制作一张渐变的图片，然后，裁切成1px高或宽的条。
然后在设置背景的时候， 横向（repeat-x）或纵向平铺（repeat-y）就可以了。
如果是纵向渐变，就做竖条，横向平铺。横向渐变，就是做横条，纵向平铺就可以了。 就这么简单。