css 自用学习笔记（二）——函数、颜色、单位函数 attr() 返回所选元素的属性值 2.calc() 允许执行计算来

函数

attr() 返回所选元素的属性值

<p><a href="111">访问a标签</a></p>
<div style="width:200px;height:200px;border:1px solid pink"></div>

<style>
  a:after {content: " (" attr(href) ")";}
  div:before {content: " (" attr(style) ")"}
</style>

2.calc() 允许执行计算来确定 CSS 属性值

<div id="div1">Some text</div>

<style>
#div1 {
  width: calc(100% - 100px);   // 可计算
  height: 20px;
  border: 1px solid black;
  background-color: yellow;
}
</style>

cube-bezier(p0,p1,p2,p3) 函数定义三次贝塞尔曲线(速度变化) P0 和 P3 是曲线的起点和终点
P1(x1,y1)、P2(x2,y2) 是可以动态改变的两个点
与 animation-timing-function 属性和 transition-timing-function 属性一起使用

<div></div>

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0, 0.5, 0.2, 1);
}

div:hover {
  width:300px;
}

hsl() 定义不同的 HSL 颜色色相（hue）: 0/360 为红色，120 为绿色，240 为蓝色
饱和度（saturation）: 0％是灰度，100％是全彩色
亮度（lightness):- 0％黑色、50％正常、100％白色

background-color:hsl(120,100%,50%);

hsla()带不透明度的不同的 HSL 颜色 alpha(透明度) 0.0（完全透明），1.0（完全不透明

background-color:hsla(120,100%,75%,0.3)

linear-gradient(direction,color,color) 颜色过渡 direction: 方向

background-image: linear-gradient(to right, red , blue);

radial-gradient(shape size at position, color,color); 径向渐变

shape：渐变的形状

ellipse（默认椭圆）
circle 圆

size：渐变的尺寸

closest-side 最近侧
farthest-side 最远侧
closest-corner 最近角落
farthest-corner（默认）最远角落

position：渐变位置

background-image: radial-gradient(circle closest-side at 60% 55% ,blue,green,yellow,black);

repeating-linear-gradient(angle,side-or-corner,color,color)重复线性渐变

background-image: repeating-linear-gradient(45deg,red,blue 7%,green 10%)

rgb() 红-绿-蓝模型（RGB)
rgba() 红-绿-蓝-阿尔法模型（RGB）

background-color:rgba(255,0,0,0.3)

var() 定义一个名为--bg-color 的自定义属性 注意：必须以 -- 开头

:root {
 --bg-color: pink; 
}

#div1 {
  background-color: var(--bg-color); 
}

颜色（部分与函数重复）

十六进制颜色

background-color: #ff0000

带透明度的十六进制颜色

background-color: #ff000080

RGB 颜色

background-color: rgb(255, 0, 0)

RGBA 颜色

background-color: rgba(255, 0, 0, 0.3);

HSL 颜色

background-color: hsl(120, 100%, 50%)

HSLA 颜色

background-color: hsla(120, 100%, 50%, 0.3)

预定义/跨浏览器的颜色名称

{background-color: blue;}

currentcolor 关键字引用元素的 color 属性值

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

单位

绝对(不建议)

cm 厘米
mm 毫米
in 英寸
px 像素
pt 点
pc 派卡

相对

em 相对于元素的字体大小（font-size）

div {
  font-size: 30px;
  border: 1px solid black;
}
span {
  font-size: 0.5em;
}

<div>ont-size 被设置为30px。
    <span>span 元素的font-size为0.5em，其等于0.5x30=15px。</span>
</div>

ex 相对于当前字体的 x-height(极少使用)，一个ex相当于的一个em一半

div {
  font-size: 30px;
  border: 1px solid black;
}
span {
  font-size: 1ex;
}

<div>font-size 被设置为30px。
   <span>div 元素内部的 span 元素的 font-size 为 1ex。</span>
</div>

3. ch 相对于 "0"（零）的宽度 4. rem 相对于根元素的字体大小（font-size）

html {
  font-size:16px;
}
div {
  font-size: 3rem;
  border: 1px solid black;
}

<p>此文档的 font-size 是 16px。</p>
<div>这个 div 元素的 font-size 为 3rem。</div>

vw 相对于视口宽度的 1% (如果显示窗口宽度为750px,1vw求得的值为7.5px)
vh 相对于视口高度的 1%(如果显示窗口宽度为900px,1vw求得的值为9px)
vmin 相对于视口较小尺寸的1% (1vmin = 1vw 或 1vh，以较小者为准)
vmax 相对于视口较大尺寸的 1％(1vmin = 1vw 或 1vh，以较小者为准)
% 相对于父元素