在上一篇中我们讲诉了选择器的使用，在这一篇中，主要讲述的是属性（对不起大家哈，之前准备软考去了，也没考好，状态有点不在）
下图是官网中css-doodle的属性
首先向大家描述的则是第一个属性：@grid属性
这个属性是用来定义整个表格的格子数和格子的一些属性的，之前在csss-doodle的标签中演示过，使用grid标签属性也能够定义一个表格，那这个属性和标签属性肯定是有不同的区别的，标签属性只能简单的定义个数，但是这个属性还能够定义整个表格的宽、高
接下里就是它的使用
<css-doodle grid="5"> :doodle { @grid: 3x3 / 8em; // 创建一个3*3的表格，表格的长宽都是8个字节 grid-gap: 1px; } background: #60569e; </css-doodle>这是运行结果
由此可见，@grid属性的优先级高于标签属性的优先级
下个属性是@use属性，这个属性的作用使用我们外部的自定义的样式，下面是我们自定义的属性
<style> :root { --rule-a: ( :doodle {@grid: 5 / 8em;} // clip-path是CSS中裁剪图形的属性 clip-path: circle(100% at 0 0); background: #60569e; ); } </style>使用我们自定义的属性
<css-doodle> @use: var(--rule-a); </css-doodle>运行结果
@use属性的设计很方便我们是实现了外部样式的引入，:root是CSS中的选择器，选择是整个文档的根元素，如果我们需要加载连个外部样式怎么办呢？同时写两次@use属性吗？可以的，但是有更方便的！这样：@use var(--rule-a), var(--rule-b);同时加载多个，中间使用逗号隔开
再下几个属性是@size属性、@min-size属性和@max-size属性，这几个属性的作用都是设置表格的宽高的！具体的就不说了哈，看意思相信各位道友都能够看明白的。
接下来的属性是@place-cell属性，这个属性的作用是设置偏移的属性，
<div align="center"> <css-doodle> :doodle { @grid: 1x5 / 8em; grid-gap: 1px; } background: #60569e; @nth(1) {@place-cell: 0 top;} @nth(2) {@place-cell: right 25%;} @nth(3) {@place-cell: center;} @nth(4) {@place-cell: .8em calc(100% - .8em);} @nth(5) {@place-cell: 75% 80%;} </css-doodle> </div>这个是运行结果
下面的图是我调用开发者模式查找他们原本的设置位置，这样一对比就能看出了
接下来是最后一个属性：@shape属性，这个属性是用来定义形状的属性，和这个属性有关的是一张图：
具体的使用看下边的代码
<css-doodle> :doodle { @grid: 7 / 8em; @shape: circle; } @even { @shape: hypocycloid 4; background: #60569e; transform: scale(2) rotate(-60deg); } </css-doodle>下边这是运行结果
css-doodle的属性讲到这就没有了，谢谢各位道友的观看，期待下篇能和你继续重逢。
