小白求教:css中如何将圆形渐变成心形?

html-css021

小白求教:css中如何将圆形渐变成心形?,第1张

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>

1、在电脑上打开Css,然后准备一个空的html结构,在其中放置一个空的div。

2、这时需要去除浏览器中一些特有的样式。

3、给这个样式一个宽高,并添加一个背景。

4、最后给样式添加border-radius属性,其值为宽或高的一半。

5、最后运行程序,这样就会在界面中看到一个圆形。

<div class="radian"></div>

.radian{

width: 200px

height: 100px

border-radius: 200px/20px/*上下有弧度的边*/

/*border-radius: 20px/200px*//*左右有弧度的边*/

background-color: red

}

border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。