文章目录
- 一、attr
- 二、calc
- 三、cubic-bezire
- 四、conic-gradient
- 五、counter
- 六、hsl
- 七、linear-gradient
- 八、radial-gradient
- 九、max/min
- 十、var
一、attr
- 返回元素的属性值
- attr() 理论上能用于所有的 CSS 属性，但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的
<body>
<a href="www.baidu.com" class="link">百度：a>
body>
<style>
.link:after {
content: attr(href);
}
style>
二、calc
<body>
<div class="box">1div>
body>
<style>
.box{
background-color: #ccc;
width: calc(100vw - 800px);
height: calc(100vh - 800px);
}
style>
三、cubic-bezire
- 定义一个贝塞尔曲线
- 可用于 animation-timing-function 和 transition-timing-function
- 参数为
cubic-bezire(x1, y1, x2, y2)
<body>
<div class="box">div>
body>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
.box:hover{
width: 300px;
}
style>
四、conic-gradient
- 定义一个圆锥渐变
- 参数：
conic-gradient([from angle] [at position,] color [degree,] color [degree,] ...)
- from angle：起始角度，默认值是 0deg
- at position：中心位置，默认值是 0% 0%
- degree：在0-360 或 0%~100%
<body>
<div class="box">div>
body>
<style>
.box{
width: 100px;
height: 100px;
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green, blue, black);
border-radius: 50%;
}
style>
五、counter
- 计数器
- counter-reset：重置计数器为0。
counter-reset: num;
- counter-increment：递增一个或多个计数器值。
counter-increment: num 64;
- counter：显示计数器
content: counter(num);
<div class="root">
<div class="box">
<input type="checkbox" name="num1" id="num1">
<label for="num1" data-num="10">label>
div>
<div class="box">
<input type="checkbox" name="num2" id="num2">
<label for="num2" data-num="32">label>
div>
<div class="box">
<input type="checkbox" name="num3" id="num3">
<label for="num3" data-num="64">label>
div>
<div class="box">
<input type="checkbox" name="num4" id="num4">
<label for="num4" data-num="-15">label>
div>
div>
<div class="num">num:div>
body>
<style>
body {
counter-reset: num;
}
.root {
display: flex;
}
label {
box-sizing: border-box;
display: block;
text-align: center;
line-height: 80px;
width: 80px;
height: 80px;
border: 1px solid #000;
margin-right: 10px;
}
label:after {
content: attr(data-num);
}
.num:after {
content: counter(num);
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked + label {
background-color: rgb(255, 215, 0);
border: 2px solid #000;
}
#num1:checked + label {
counter-increment: num 10;
}
#num2:checked + label {
counter-increment: num 32;
}
#num3:checked + label {
counter-increment: num 64;
}
#num4:checked + label {
counter-increment: num -15;
}
style>
六、hsl
- hsl() 函数使用色相、饱和度、亮度来定义颜色。
- 语法：
hsl(hue, saturation, lightness)
- hue：色相，范围是0~360。0、360为红色，120为绿色，240为蓝色。
- saturation：饱和度，0%为灰色，100%为全色。
- lightness：亮度，0%为暗，50%为普通，100%为白。
- hsla() 添加透明度的属性。
- alpha：透明度。0为完全透明，1为完全不透明。
<body>
<p class="p">1p>
body>
<style>
p {
background-color: hsl(120, 100%, 50%);
}
style>
七、linear-gradient
- 创建一个表示两种或多种颜色线性渐变的图片。
- 语法：
linear-gradient(direction, color-stop1, color-stop2, ...)
- direction：方向，可以是角度（45deg）和方位(to left bottom)。
- color-stop：起止颜色。加百分比表示在那个地方开始绘制颜色。
<style>
body {
background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
}
style>
八、radial-gradient
- 用径向渐变创建图像。
- 语法：
radial-gradient(shape size at postion, color-stop1, color-stop2, ...)
- shape：形状。默认值ellipse为椭圆，circle为正圆。
- size：
| 关键字 |
描述 |
| closest-side |
渐变结束的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。 |
| closest-corner |
渐变结束的边缘形状与容器距离渐变中心点最近的一个角相交。 |
| farthest-side |
与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 |
| farthest-corner |
渐变结束的边缘形状与容器距离渐变中心点最远的一个角相交。 |
- position：位置。默认值center，top为圆心在顶部，bottom为圆心在底部。
<body>
<div>div>
body>
<style>
div {
width: 500px;
height: 300px;
background: radial-gradient(ellipse at top, #e66465, #9198e5);
}
style>
九、max/min
- 选择最大/小的值作为属性的值
- 语法：
max(value1, value2, ...)、min(value1, value2, ...)
十、var
- var() 函数用于插入自定义的属性值
- 语法：
var(value[, default])
- value：自定义属性的名称，必须是
-- 开头。
- default：value没有被定义，就用default值
:root {
--bg-color: blue;
}
div {
background-color: var(--bg-color);
}
