整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
目中有時候會遇到這個問題：一行有3個div，希望這3個div平分屏幕寬度，并且高度等于寬度。
第一個問題：平分屏幕寬度
可以對div設置百分比寬度，而不是直接用px寬度，這里用到了響應式設計的思想，可以參考這篇文章：自適應網頁設計（Responsive Web Design）
第二個問題：動態設置高度和寬度一致
有兩種方法，一種是用js動態設置，一種是直接用CSS設置
先看下html代碼
<ul>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
</ul>
公用的CSS
ul,li{
list-style: none;
}
* {
margin: 0;
padding: 0;
outline: 0
}
body {
margin: 0;
padding: 0;
-webkit-appearance: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
}
ul{
margin:10px;
}
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
用js動態設置
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
});
用CSS設置
.dummy {
padding-top: 100%; /* 1:1 aspect ratio */
width: 100%;
background: #333333;
}
CSS設置padding-top的原理：Use CSS to Specify the Aspect Ratio of a Fluid Element
/———————————————————
然后嘗試對圖片設置高度等于動態寬度
js方法很簡單，跟上面的方法基本相同
<ul>
<li class="container">
<img src="images/test_1.jpg"/>
<div class="element">
some text
</div>
</li>
<li class="container">
<img src="images/test_2.jpg"/>
<div class="element">
some text
</div>
</li>
<li class="container">
<img src="images/test_3.jpg"/>
<div class="element">
some text
</div>
</li>
</ul>
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
.container img{
width: 100%;
height:100%;
}
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
});
CSS方法
<ul>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
</ul>
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
.dummy{
padding-top: 100%; /* 1:1 aspect ratio */
width: 100%;
background:url(images/test_3.jpg) no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
}
通過設置background可以實現。
div包含img的方法沒有試驗成功，以后繼續嘗試
/————————————-
還有一個問題，怎么設置div和img之間的padding，又能保證div寬度是屏幕寬度的三分之一？
下是一個使用HTML和CSS實現綻放的煙花的示例代碼：
```html
<!DOCTYPE html>
<html>
<head>
<title>綻放的煙花</title>
<style>
.firework {
position: relative;
width: 100px;
height: 100px;
background-color: #ff0000;
border-radius: 50%;
animation: explode 1s ease-in-out infinite;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="firework"></div>
</body>
</html>
```
這段代碼創建了一個`div`元素，并將其樣式設置為一個圓形的紅色煙花。使用CSS的動畫效果，通過`@keyframes`定義了一個名為`explode`的動畫，使煙花在1秒鐘內以縮放的方式產生綻放效果。動畫會無限循環播放，直到頁面關閉。
你可以將上述代碼保存為一個HTML文件，并在瀏覽器中打開，就能看到綻放的煙花效果了。希望你喜歡！
錐漸變類似于徑向漸變。兩者都是圓形的，并且使用元素的中心作為顏色的源點。徑向漸變的顏色從圓的中心中心輻射，而圓錐漸變是圍繞一個中心點旋轉。
它們被稱為“圓錐形”，因為它們從上面看起來像的圓錐形。比如可以使用圓錐漸變制作餅圖或色輪。
語法如下：
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);參數說明：
值 | 描述 |
from angle | 可選。起始角度。默認值為 0deg |
at position | 可選。中心位置。默認居中。 |
color degree, ..., color degree | 角漸變斷點。該值包含一個顏色值，后跟一個可選的停止位置（ 0 到 360 之間的度數或 0% 到 100% 之間的百分比）。 |
這是一個沒有設置任何屬性的，只聲明了2中顏色的漸變，如下示例：
.gradient {
background-image: conic-gradient(blue, red);
} 默認漸變的角度是0，正值時，會沿著順時針方向，負值相反方向，如下示例：
.gradient {
/* 一個旋轉 45 度的錐形漸變，從藍色漸變到紅色 */
background-image: conic-gradient(from 45deg, blue, red);
} 45度漸變
如下圖是-45deg時，漸變按逆時針方向。
-45度漸變
使用 at 語法，比如 at left ，at top left ，at 0 0(左上角)等設置中心點的位置,如下示例：
/* 一個藍紫色框：從藍色漸變到紅色，但只有右下象限可見，因為錐形漸變的中心位于左上角 */
conic-gradient(from 90deg at 0 0, blue, red);at 0px 0px
此時，是否還是不太明白，我們可以繼續改變中心點的位置，比如設置中心點距離左邊50px 距離上邊50px，如下示例：
.gradient {
/* 錐形漸變的中心位于距離左上角各50px */
background:conic-gradient(from 90deg at 50px 50px, blue, red);
} at 50px 50px
我們繼續，當中心點設置為 at left 什么效果？
background:conic-gradient(from 90deg at left, blue, red);at left
是不是很有意思，你可以嘗試設置其它的值，看看中心點的位置是什么樣的。
和徑向漸變一樣，你可以設置顏色的結束位置，不同的地方是圓錐漸變的只能使用角度 deg、梯度 grad、弧度 rad和圈 turn這幾個單位。
如下示例：
/*使用角度*/
.gradient {
background:conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
} /*使用梯度grad*/
.gradient {
background:conic-gradient(red 40grad, 80grad, blue 360grad);
} /*使用弧度 rad*/
.gradient {
background:conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
} /*使用圈 turn*/
.gradient {
background:conic-gradient(#fff 0.09turn, #bbb 0.25turn, #666 0.6turn);
} 關于各種單位的具體介紹可以參考這里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient
使用圓錐漸變可以制作一個色輪，如下示例：
html:
<div class="gradient"></div>css:
div{
width:200px;
height:200px;
border-radius:200px;
}
.gradient {
/* 色輪 */
background: conic-gradient(
hsl(360, 100%, 50%),
hsl(315, 100%, 50%),
hsl(270, 100%, 50%),
hsl(225, 100%, 50%),
hsl(180, 100%, 50%),
hsl(135, 100%, 50%),
hsl(90, 100%, 50%),
hsl(45, 100%, 50%),
hsl(0, 100%, 50%)
);
} 效果：
色輪
通過上面的色輪示例，在結合之前學習線性或徑向漸變時改變顏色結束位置的知識，是否對如何制作一個餅圖有了思路。如下示例：
html:
<div class="gradient"></div>css:
div{
width:200px;
height:200px;
border-radius:200px;
}
.gradient {
background:conic-gradient(
#ff00ff,
#ffff00 0deg 60deg,
#00ffff 60deg 120deg,
#66ff66 120deg 180deg,
#000066 180deg 240deg,
#ff0033 240deg 300deg,
#850244 300deg);
} 效果：
餅圖
到此已經介紹了圓錐漸變的使用方法，使用圓錐漸變可以制作很多特效，比如餅圖，非常實用，本篇作為入門介紹，難免有誤，不夠詳細，所以關于其詳細的內容原理可以參考下面的參考資料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients
https://css-tricks.com/a-complete-guide-to-css-gradients/
下面將會繼續介紹其它漸變的使用方法，你可以關注我，繼續學習其它漸變知識。
其它相關文章：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
