浅尝css函数

最新推荐文章于 2024-08-21 11:04:16 发布

iFulling

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量532

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/realoser/article/details/130750411

版权

前端专栏收录该内容

35 篇文章 5 订阅

订阅专栏

文章目录

一、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

动态计算css属性值。

<body>
<div class="box">1</div>
</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">1</p>
</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);
}

iFulling

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
浅尝css函数

文章目录一、attr二、calc三、cubic-bezire四、conic-gradient五、counter六、hsl七、linear-gradient八、radial-gradient九、max/min十、var
复制链接

扫一扫