css做紅色的心的方法：先建立一個HTML範例檔；然後定義一個div，並透過css屬性畫出一個圓形；接著做出一個正方形；最後透過css transform中的rotate屬性實現愛心樣式即可。
本教學操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。
用css做一個愛心
摘要：HTML的標籤都比較簡單，入門非常的迅速，但是CSS是一個需要我們深度挖掘的東西，裡面的許多樣式屬性掌握幾個常用的便可以實現很好看的效果，下面我便教大家如何用CSS做一個愛心。
.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;
}【推薦：《css影片教學》】
第三步我們就需要做一個正方形了。
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}做完這些的效果已經基本上出來了，但是我們還需要調整一下愛心的角度，這時就需要用到我們css樣式中的transform中的rotate屬性了。
我們由於需要把三個p都旋轉角度，所以我們把這三個p放在一個p裡面。具體程式碼如下：
.main{
transform: rotate(45deg);
margin: 300px;
}做到現在，我們的愛心就已經做出來咯。效果圖如下：
全部程式碼如下（包含HTML程式碼和CSS程式碼）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="css/square.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="main">
<div class="disc1"></div>
<div class="disc2"></div>
<div class="square"></div>
</div>
</body>
</html>*{
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;
}#
以上是css怎麼做個紅色的心的詳細內容。更多資訊請關注PHP中文網其他相關文章！
