整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
目中有时候会遇到这个问题：一行有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小时内与您取得联系。
