CSS基础知识筑基( 四 ) _生活百科

文章插图
圆锥渐变conic-gradient()沿着圆的时钟方向进行旋转渐变（conic /?k?n?k/锥形）

conic-gradient (开始角度/圆心位置 , 颜色位置%|角度deg , 颜色位置%|角度deg , ... )

from angele：锥形渐变的开始角度，from 0deg
at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
- 坐标定位（像素、百分比）：at 0 50%，at 10px 30px
- 方位定位（top、bottom、right、left、center）：at left top

<div class="cg"><p>b1</p> <p>p2</p> <p>扇形</p></div><style>.cg p { width: 100px; height: 100px; text-align: center; font-size: 20px;line-height: 100px; margin: 10px; display: inline-block;}.cg p:nth-child(1) {background-image: conic-gradient(from 0deg,black 10%,green 90deg,red)}.cg p:nth-child(2) {background-image: conic-gradient(from 0deg at center 20px,black 10%,green 90deg,red)}.cg p:nth-child(3) {border-radius: 50%;background-image: conic-gradient(from 90deg,blue 60deg,green 60deg,green 120deg,red 120deg)}</style>

文章插图
? 锥形渐变实现的进度图效果：

文章插图

<style>.pie{width: 200px;height: 200px;/* 锥形渐变实现进度环颜色 */background-image: conic-gradient(#7870e4 70%,#dce7f3 0) ;border-radius: 50%;padding: 20px;/* 内容居中 */display: flex;align-items: center;}.pie p{height: 100%; width: 100%; font-size: 2em;/* 文字居中 */display: flex; justify-content: center; align-items: center;/* 白色圆环 */background-color: white;border-radius: 50%;}</style><div class="pie"><p>70%</p></div>

重复渐变repeating重复渐变就是执行多次渐变，以铺满整个区域，上面三种渐变都支持重复渐变模式。

repeating-上面的三种渐变

<div class="reg"><p>b1</p> <p>b2</p> <p>b3</p></div><style>.reg p {width: 100px; height: 100px; text-align: center; font-size: 20px;line-height: 100px; margin: 10px; display: inline-block;}.reg p:nth-child(1) {background-image: repeating-linear-gradient(green 0px,green 5px,red 5px, red 10px)}.reg p:nth-child(2) {background-image: repeating-conic-gradient(from 0deg at center, black 30deg, green 60deg, red 90deg)}.reg p:nth-child(3) {border-radius: 50%;background-image: repeating-radial-gradient(green 0px,green 5px,red 5px, red 10px)}</style>

文章插图
3.5、计算函数calc()函数calc （计算表达式）可动态的计算出一个数值，IE9 。

可用于长度、角度、时间、百分比、数字的计算。
支持+加法、-减法、*乘法、/除法。注意运算符前后须有空格，否则可能会无法识别为一个有效的表达式，因为+-可能会被认为是正负数。

width: calc(20% + 100px);width: calc(100% / 6);font-size: calc(1em + 1vw);3.6、CSS变量var(--)带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性(IE)，通过 var()函数在作用域范围内复用的。

变量的作用域：取决于其申明的选择器。

:root {/* :root标识根元素html，相当于全局作用域 */--main-bg-color: pink; /*申明css全局属性（变量）*/--Hi: 'hello';--Name: var(--Hi)',world'; /*字符串变量可以拼接*/}body {background-color: var(--main-bg-color);}

04、盒子模型4.1、万物皆盒子在CSS眼中，万物皆盒子，每一个元素都是一个盒子，盒子有边框border，有内边距padding，有外边距margin ，以及盒子内的内容区域content 。HTML中的元素就是各种层叠的盒子，CSS的布局也是基于这些盒子。