CSS中常用函数和渐变效果

公众号_前端每日技巧 2023-03-28 原文

calc

calc()函数支持加减乘除四种运算，很多类型都可以使用calc()函数，例如angle、length、frequency、time，percentage、number、integer，因为calc()有很多约束，所以这些类型不一定都可以出现calc()函数。

我们在calc()函数中不能使用当前css属性不支持的数据类型。

// 下面这些都是不合法的
width: calc(100% - 4deg);
width: calc(12s - 10);

我们在calc()函数中，运算符前后带百分比或者单位的值不能进行乘除运算，只能进行加减运算。除法运算斜杠右侧必须是不为0的数值类型。calc()书写上也有一定限制的，减号和加号两边一定要有空格。乘法和除法符号两侧不需要空格，但是为了格式一致，我们一般使用空格隔开。

我们一般只需要定义一个CSS的属性，让其他CSS样式基于这个属性进行构建，然后我们就可以通过JavaScript代码操作CSS的属性值，就可以在整个网页中去动态变化。

min和max和clamp函数

从语法上看，和calc()函数类似，任何可以使用angle、length、frequency、time，percentage、number、integer数据类型的地方都可以使用min()、max()、clamp()函数，而且min()、max()、clamp()这三个函数与calc()函数是可以相互嵌套使用的。 demojs

width: calc(min(600px, 87vw) / 3);

min()函数支持一个或多个表达式，每个表达式之间使用逗号分割，将最小的表达式的值作为返回值。而且min()函数的表达式可以是数学表达式，例如算术运算符。

width: min(11px * 11, 11rem);
width: min(calc(22px * 43), 88em);
width: min(75px * 43, var(--width))

width: min(11vw, 6em, 81px)中出现了2个相对长度，1个固定长度值，所以width计算值最大的就是81px, 但是实际的宽度值我们要根据浏览器视口宽度去判断，当浏览器的视口宽度小于800px, 或者文字字号小于16px，真实的宽度值就会更小，这个意思是说，虽然我们函数的名称是min()用来表示更小，但是这个函数用来限制最大值的。

max()函数和min()函数语法类似，主要区别是max()函数返回的是最大值，而min()函数返回的是最小值。width: max(11vw, 6em, 80px)其中最小宽度是80px, 但是如果浏览器宽度大于800px，或者文字字号大于16px，则最终的宽度会很大，这个意思就是说，虽然max()表示最大值，但是它的作用是限制最小值的，这就和min()是相反的，除此之外max()函数其他特性和min()都是相似的。

clamp()函数的作用是返回一个区间范围的值。语法使用：clamp(MIN, VAL, MAX)，其中MIN表示最小值，VAL表示首选值，MAX表示最大值，意思是VAL在MIN和MAX范围内，则使用VAL作为函数返回值，如果VAL大于MAX，则使用MAX作为返回值，如果VAL小于MIN，则使用MIN作为返回值，所以clamp(MIN, VAL, MAX)实际上等同于max(MIN, min(VAL, MAX))。

CSS渐变

linear-gradient()线性渐变

简单效果，从上到下，从黑色到红色的渐变效果实现：

linear-gradient(black, red);

linear-gradient默认是自上而下的，不需要指定角度，所以在所有线性渐变语法中，to bottom都是多余的。

// 这里的to bottom就是多余的
linear-gradient(to bottom, black, red)

如果不是自上而下而是其他方向的就需要我们去指定渐变的方向，渐变的方向有两种表达方式，一种是使用关键字to+方位，一种是直接使用角度值。

// 使用to + 方位
linear-gradient(to right, black, red);
// 直接赋值角度值
linear-gradient(66deg, black, red);

我们在项目中会多次使用"to + 方位值"，一方面是让我们更容易理解和记忆，一方面是因为项目中的渐变效果不是对角渐变，就是水平或者垂直渐变，更适合使用"to + 方位值"这种写法，而且这种写法实现的渐变效果不会受到元素尺寸的限制。

我们再看看渐变的起点和重点，当我们理解了CSS渐变的角度值对应的方位，再去理解线性渐变的起点和重点的位置，就会理解线性渐变渲染效果。

.wrapper {
    width: 66px;
    heigth: 144px;
    border: 1px solid #ccc;
    background-image: linear-gradient(45deg, black 100px, red 100px 155px, white 155px);
}

上面代码中的100px的起点位置不是从端点开始的，也不是从元素的某一边进行开始的，而是沿着渐变角度所在的直线的垂直线开始的。如果渐变断点中出现了百分比值，这个百分比值就是相对渐变的起点到终点的距离计算出来的。

我们在渐变中还会遇到color-stop-list数据类型，这也就是我们用到的渐变断点，渐变断点至少有2个颜色值，而且断点语法中的颜色值和位置值的前后顺序也是有要求的，颜色值必须在位置值的前面。

// 错误写法
linear-gradient(black);
linear-gradient(black, 33% red);
//正确写法
linear-gradient(black, red 33%);

当没有指定具体断点位置的时候，各个渐变颜色所形成的色块大小是自动等分的。如果起点和终点的颜色与相邻断点的颜色值一样，那么起点色值和终点色值是不用写出来。

我们在同一个渐变中，不同类型的断点位置是可以同时使用的，渐变的断点位置也可以是负数或者大于100%。

但是当存在多个渐变断点的时候，前面的渐变断点位置值有时候会比后面的渐变断点设置的位置值要大，这个时候后面的渐变断点位置值会按照前面的断点位置值进行计算。

linear-gradient(red 10px, pink 1px, green 55px);

渐变断点还支持一次性设置两个位置值，除此之外，我们也可以设置颜色的转换点位置。

linear-gradient(red, 66%, green);

注意：当我们不是高清显示器，在谷歌浏览器中，不同颜色位于同一断点位置的时候，两个颜色的连接处可能会有明显的锯齿。

中常 CSS span color style css 线性渐变颜色值Html/CSS 前端开发yyds干货盘点

有关CSS中常用函数和渐变效果的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
ruby-on-rails - 在 ruby 中使用 gsub 函数替换单词 - 2
我正在尝试用ruby中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了
ruby - 在 Ruby 中有条件地定义函数 - 2
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby - 在 Ruby 中按名称传递函数 - 2
如何在Ruby中按名称传递函数？(我使用Ruby才几个小时，所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁？我可以只
C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2
说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时
ruby-on-rails - 将字符串转换为 ruby-on-rails 中的函数 - 2
我需要一个通过输入字符串进行计算的方法，像这样function="(a/b)*100"a=25b=50function.something>>50有什么方法吗？最佳答案您可以使用instance_eval:function="(a/b)*100"a=25.0b=50instance_evalfunction#=>50.0请注意，使用eval本质上是不安全的，尤其是当您使用外部输入时，因为它可能包含注入(inject)的恶意代码。另请注意，a设置为25.0而不是25，因为如果它是整数a/b将导致0(整数)。
ruby - 在 ruby 中使用 .try 函数和 .map 函数 - 2
我需要从json记录中获取一些值并像下面这样提取curr_json_doc['title']['genre'].map{|s|s['name']}.join(',')但对于某些记录，curr_json_doc['title']['genre']可以为空。所以我想对map和join()使用try函数。我试过如下curr_json_doc['title']['genre'].try(:map,{|s|s['name']}).try(:join,(','))但是没用。最佳答案你没有正确传递block。block被传递给参数括号外的方法
ruby - 是否可以从也在该模块中的类内部调用模块函数 - 2
在这段Ruby代码中:ModuleMClassC当我尝试运行时出现“'M:Module'的未定义方法'helper'”错误c=M::C.new("world")c.work但直接从另一个类调用M::helper("world")工作正常。类不能调用在定义它们的同一模块中定义的模块函数吗？除了将类移出模块外，还有其他解决方法吗？最佳答案为了调用M::helper，你需要将它定义为defself.helper;结束为了进行比较，请查看以下修改后的代码段中的helper和helper2moduleMclassC