圣誕樹是一種常見的裝飾圣誕樹，其外觀是一棵由彩燈和裝飾品組成的樹。下面是一個簡單的圣誕樹 CSS 源碼，展示了如何創(chuàng)建一個具有彩燈和裝飾品的圣誕樹。
```css
.tree {
position: relative;
width: 150px;
height: 150px;
.tree > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
.tree > div:before,
.tree > div:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: red;
border-radius: 50% 50% 0 0;
transform: rotate(-45deg);
.tree > div:after {
left: 0;
transform: translate(0, 50%);
.tree > div {
display: inline-block;
vertical-align: top;
width: 100%;
height: auto;
.tree > div > div {
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
background-color: green;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
.tree > div > div:nth-child(1) {
background-color: blue;
.tree > div > div:nth-child(2) {
background-color: yellow;
.tree > div > div:nth-child(3) {
background-color: orange;
.tree > div > div:nth-child(4) {
background-color: pink;
.tree > div > div:nth-child(5) {
background-color: purple;
.tree > div > div:nth-child(6) {
background-color: red;
上面的代碼定義了一個 6 行圣誕樹，其中第 2、4、6 行是彩燈。使用 `display: inline-block` 將每個彩燈設置為一個內聯(lián)塊元素，并使用 `border-radius` 屬性設置彩燈的圓角。每個彩燈使用 `transform` 屬性旋轉 45 度。最后，使用 `background-color` 屬性將每個彩燈的外部背景色設置為不同的顏色。
使用 CSS 可以輕松地創(chuàng)建一個漂亮的圣誕樹，還可以根據需要添加其他裝飾品，如彩燈、彩帶、鈴鐺等。