c语言color函数用法_CSS函数（三）

最新推荐文章于 2023-03-25 13:00:45 发布

幸行远

最新推荐文章于 2023-03-25 13:00:45 发布

阅读量5.6k

点赞数

文章标签： c语言color函数用法

本文链接：https://blog.csdn.net/weixin_42456278/article/details/112115384

版权

本文主要探讨C语言中的color函数用法，并结合CSS中的颜色函数进行对比分析，讲解它们在不同环境下的应用和浏览器支持情况。

摘要由CSDN通过智能技术生成

上次给大家介绍了转换函数、缓动函数，这次给大家介绍图形函数、滤镜函数、其他函数中常用的函数进行解读。 一、图形函数 1.circle() circle()函数用于定义一个圆形 circle(radius at X Y) 参数1：半径参数2：水平中心点位置(X轴) 参数3：垂直中心点位置(Y轴) 1.1用法

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Documenttitle>    <style>        .test-div,        .test-div-item {
                margin-bottom: 10px;            width: 200px;            height: 200px;            line-height: 40px;            color: #fff;            background-color: red;        }        .test-div-item {
                background-color: green;        }        .div1 {
                clip-path: circle(50px at 100px 100px);        }        .div2 {
                clip-path: circle(100px at 50px 50px);        }        .div3 {
                clip-path: circle(100px at 120px 120px);        }style>head><body>    <div class="test-div">        <div class="test-div-item div1">clip-path: circle(50px at 100px 100px);div>    div>    <div class="test-div">        <div class="test-div-item div2">clip-path: circle(100px at 50px 50px);div>    div>    <div class="test-div">        <div class="test-div-item div3">clip-path: circle(100px at 120px 120px);div>    div>body>html>

效果图

1.2浏览器支持

函数
circle()	53.0	14.0	49.0	10.0	40.0

2.ellipse() ellipse()函数用于定义一个椭圆形 ellipse(radiusX radiusY at X Y) 参数1：水平半径(X轴半径) 参数2：垂直半径(Y轴半径) 参数3：水平中心点位置(X轴) 参数4：垂直中心点位置(Y轴) 2.1用法

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Documenttitle>    <style>        .test-div,        .test-div-item {
                margin-bottom: 10px;            width: 200px;            height: 200px;            line-height: 40px;            color: #fff;            background-color: red;        }        .test-div-item {
                background-color: green;        }        .div1 {
                clip-path: ellipse(50px 80px at 100px 100px);        }        .div2 {
                clip-path: ellipse(100px 80px at 50px 50px);        }        .div3 {
                clip-path: ellipse(100px 80px at 120px 120px);        }style>head><body>    <div class="test-div">        <div class="test-div-item div1">clip-path: ellipse(50px 80px at 100px 100px);div>    div>    <div class="test-div">        <div class="test-div-item div2">clip-path: ellipse(100px 80px at 50px 50px);div>    div>    <div class="test-div">        <div class="test-div-item div3">clip-path: ellipse(100px 80px at 120px 120px);div>    div>body>html>

效果图

2.2浏览器支持

函数
ellipse()	53.0	14.0	49.0	10.0	40.0

3.inset() inset()函数指定一个inset类型的矩形未指定round四个参数分别为inset(top right bottom left) 参数1：上边向内距离参数2：右边向内距离参数3：下边向内距离参数4：左边向内距离指定round参数为inset(top right bottom left round top right bottom left) 参数1：上边向内距离参数2：右边向内距离参数3：下边向内距离参数4：左边向内距离参数5：指定圆角参数6：上边圆角度数参数7：右边圆角度数参数8：下边圆角度数参数9：左边圆角度数 3.1用法

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Documenttitle>    <style>        .test-div,        .test-div-item {
                margin-bottom: 10px;            width: 200px;            height: 200px;            line-height: 40px;            color: #fff;            background-color: red;        }        .test-div-item {
                background-color: green;        }        .div1 {
                clip-path: inset(20px 40px round 10px);        }        .div2 {
                clip-path: inset(10px 20px 40px 60px);        }        .div3 {
                clip-path: inset(20px round 10px 30px);        }style>head><body>    <div class="test-div">        <div class="test-div-item div1">clip-path: inset(20px 40px round 10px);div>    div>    <div class="test-div">        <div class="test-div-item div2">clip-path: inset(10px 20px 40px 60px);div>    div>    <div class="test-div">        <div class="test-div-item div3">clip-path: inset(20px round 10px 30px);div>    div>body>html>

效果图