Read css attribute values

guidelines

Preface
- start
- Several common data types
- - angle
  - basic-shape
  - color
  - fliter-function
  - gradient
  - image
  - interger
  - length
  - number
  - percentage
  - position
- symbol
- practise

Preface

When checking CSS documents, syntax prompts similar to those wrapped by <> will always appear. These are actually the basic data types of CSS. They are as important as the basic data types in programming languages. So if you want to check CSS more smoothly, Documentation, understanding and familiarity with CSS basic data types is necessary. Common data types plus symbols and keywords form the attribute value syntax of CSS.
Here is my commonly used CSS reference link
http://css.doyoe.com/

start

First find the most common CSS attribute border
link: http://css.doyoe.com/properties/backgrounds/border.htm
Insert image description here

Several common data types

Reference link: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Types

angle

css 数据类型
用于表示角的大小，单位为：度（degrees）、 百分度（gradians）、弧度（radians）或圈数（turns）

deg
度。一个完整的圆是 360deg。例：0deg，90deg，14.23deg。
grad
百分度。一个完整的圆是 400grad。例：0grad，100grad，38.8grad。
rad
弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度。例：0rad，1.0708rad，6.2832rad。
turn
圈数。一个完整的圆是 1turn。例：0turn，0.25turn，1.2turn。

basic-shape

<basic-shape>是一种表现基础图形的 CSS 数据类型，作用于clip-path 与 shape-outside 属性中。
clip-path 做尺寸裁切 属性 
shape-outside

color

CSS 数据类型 <color> 表示一种标准 RGB 色彩空间（sRGB color space）的颜色

fliter-function

<filter-function> CSS 数据类型 代表可以改变输入图像外观的图形效果。它可以用于filter 和 backdrop-filter 属性。

blur()
模糊图像
brightness()
让图像更明亮或更暗淡
contrast()
增加或减少图像的对比度
drop-shadow()
在图像后方应用投影
grayscale()
将图像转为灰度图
hue-rotate()
改变图像的整体色调
invert()
反转图像颜色
opacity()
改变图像透明度
saturate()
超饱和或去饱和输入的图像
sepia()
将图像转为棕褐色

gradient

<gradient> 是一种<image>CSS 数据类型的子类型，用于表现两种或多种颜色的过渡转变。
<gradient> 数据类型由下列函数定义。
颜色值沿着一条隐式的直线逐渐过渡。由linear-gradient() 产生。
颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由radial-gradient()函数产
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() (en-US)和repeating-radial-gradient() 函数产生。

image

一个<image>CSS 数据类型可能表示成如下几种类型：
一个图像被引用为 CSS <url>数据类型使用 url() 方法；
url(test.jpg) 
一个 CSS<gradient>;
linear-gradient(to bottom, blue, red) 
页面的一个部分，定义在element()方法中(不常见)；
element(#colonne3)

interger

<integer>数据类型由一个或多个十进制数字组成，
包括 0 到 9，可以选择前面加一个 + 或-号。没有与整数关联的单位。

length

长度 <length> 是用于表示距离尺寸的 CSS 数据类型。
许多 CSS 属性会用到长度，
比如 width、margin、padding、font-size、border-width 和 text-shadow。

number

 CSS 数据类型代表一个数字，可为整数或小数。
 它的语法扩展了<integer>的数据值。要表示一个小数则加上小数部分
  -- “."后跟一或多为十进制数字--到任何<integer>数据值。
 像<integer>数据类型一样，<number>没有任何单位，并不是一个 CSS 尺寸。

percentage

CSS 数据类型 <percentage> 表述一个百分比值。
许多 CSS 属性 可以取百分比值，经常用以根据父对象来确定大小。
百分比值由一个<number>具体数值后跟着%符号构成。
就像其它在 css 里的单位一样，在%和数值之间是不允许有空格的。

position

<position> CSS 数据类型表示用于设置相对于框的位置的 2D 空间中的坐标。

特定坐标可以由具有特定偏移的两个关键字给出。
关键字表示元素框的一条边或两条边之间的中心线：左，右，上，下或中心 
(其表示左边缘和右边缘之间的中心，或者顶部边缘或底部边缘之间的中心，
这取决于上下文).

symbol

Can be divided into the following three categories

literal symbol

字面符号指的是CSS属性值中原本就支持的合法符号，这些
符号在CSS语法中会按照其原本的字面意义呈现。目前字面符号就两
个，一个是逗号（,），另一个是斜杠（/）

symbol	describe
，	Used to separate several parallel values, or separate parameter values of a function
/	Used to separate multiple parts of a value, used in CSS abbreviations to separate values of the same type but belonging to different CSS properties, and used in some CSS functions

Combination symbols

组合符号用来表示数个基本元素之间的组合关系。
目前共有5个组合符号，其中大多数组合符号的含义一目了然

symbol	name	describe
space character	juxtapose	The symbol is an ordinary space character, indicating that each part must appear and must appear in order.
&&	and	Parts must appear but may not appear in order
\|\|	or	At least one of each part must appear, and they may not appear in order.
\|	mutually exclusive	Exactly one of these appears in each part
[]	Square brackets	Group the parts to bypass the precedence rules of several symbols above, so the square brackets have the highest precedence

Quantity symbol

Insert image description here

practise

Now look at the border again

border：<line-width> || <line-style> || <color>
<line-width>：定义元素的边框厚度。
<line-style>：定义元素的边框样式。
<color>：定义元素的边框颜色。

Indicates that the border can set one or more line-width line-style colors without sorting.

Let’s do an upgrade exercise
Insert image description here

 <side-or-corner> = [ left | right ] || [ top | bottom ]
 <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
 <linear-color-stop> = <color> [ <color-stop-length> ]?
 <color-stop-length> = [ <percentage> | <length> ]{
    
    1,2}
<color-hint> = [ <percentage> | <length> ]

分析：
1. 首先 [] 方括号优先级最高 后面接了个？代表 [ <angle> | to <side-or-corner> ,] 所设置的属性 可以设置也可以不设置
2. 再分析[ <angle> | to <side-or-corner> ,] 其中存在| 互斥符号 代表着 要么直接设置成<anger> 角度单位  要么设置成 to(关键字) <side-or-corner> ，设置后要带上，号才能设置后面的属性
3. 后面  <color-stop-list> 要分解开

box-shadow: none | [ inset? && {2,4} && ? ]#

其中出现的“与”组合符（&&），表明inset关键字、
<length>数据类型和<color>数据类型的顺序是可以随意排列的，
所以下面这几种写法都是合法的：
box-shadow: 2px 2px inset #000;
box-shadow: inset #000 2px 2px;
box-shadow: #000 2px 2px inset;
其中<length>{
    
    2,4}表示可以使用2～4个<length>数据类
型，```