d，e，开头的css属性在小程序里比较少，就放在一起了，先看图： 那先说c开头的属性： 1.caption-side：这个是表格的标题所处的位置属性。取值：bottom ，top。 小程序里没有table的标签支持，不清楚怎么设置。小程序里设置表格其实很简单，只需要用列表渲染就可以。如下图： ~~~ [html] view plain copy <view class="container"> <view class="table"> <view class="tr"> <view class="th">标题一</view> <view class="th">标题二</view> <view class="th">标题三</view> <view class="th">标题四</view> <view class="th">标题五</view> </view> <view class="tr" wx:for="{{5}}"> <view class="td"> 内容</view> <view class="td">内容</view> <view class="td">内容</view> <view class="td"> 内容</view> <view class="td">内容</view> </view> </view> </view> ~~~ 样式： ~~~ .table { border: 1px solid greenyellow; border-right: 0rpx; border-bottom: 0rpx; width: 98% } .tr { width: 100%; display: flex; justify-content: space-between; } .th ,.td { padding: 10px; border-bottom: 1px solid greenyellow; border-right: 1px solid greenyellow; text-align: center; width:100% } .th { font-weight: 400rpx; background-color: greenyellow } ~~~ 2.clear：指定位置不允许有浮动元素：取值：left，right，both，none。 3.clip：裁剪。见position。 4.clip-path，取代clip。 5.color：颜色，见这里. (这里插一句，本来这一篇都快写完了，谁知道一不小心点错了，没保存，又得重新来搞，崩溃啊！怎么就不带自动保存的。差评！) 6.color-interpolation-filters:指定哪个彩色空间补白的使用影响。具体有啥用没搞明白。 取值：auto：在指定的彩色空间不发生.linearRGB：颜色运算在线性化的RGB彩色空间应该发生。sRGB：颜色运算在sRGB彩色空间应该发生。 7.column-count: 指定某个元素应分为的列数。假如要分成3列：column-count：3. 8.column-fill：指定如何填充列。取值：默认值：balance，列长短平衡。浏览器应尽量减少改变列的长度。auto：列顺序填充，他们将有不同的。 9.column-gap：指定的列之间的距离。column-gap：40rpx，那两列之间的距离为40rpx。 10.column-rule: 指定列之间的规则：宽度，样式和颜色。column-rule：column-rule-color column-rule-style column-rule-width 11.column-rule-color：这是颜色。没啥可说的。 12.column-rule-style ：列之间的间隔线的样式，取值有dashed，double，dotted，hidden，groove，inset，outset，none，ridge，solid。 13.column-width：间隔线的宽度。 14.column-span：独占一行，取值为：1|all。当取值为all 的时候独占一行，如果是1的时候跟别的列在一行。 15.column-width: 列的宽度。 16.columns: 指定列的宽度和数量。columns：column-width column-count，可以快速的创建多宽几列。说多了没用 看图： 17.content：该属性与 :before 及 :after 伪元素配合使用，来插入生成内容。这个属性好玩一点，试了几个不同的组件发现表现不一样。先来看图。wxml代码就这个 ~~~ <view> <text>头像</text> <button size="mini">按钮</button> <input placeholder="我是输入框"/>我是输入框 </view> ~~~ 很明显可以看出来，在text，button组件中如果是before，那图片将在前面，而input组件中则是代替placeholder的地方。最好玩的就是：after了，在text组件中表现为在字后面，而button中则感觉是在字的上一层，而input中则直接消失不见了。所以很明显这个属性需要好好熟悉以后才能更好的使用。 18.counter-increment: 递增一个或多个计数器值。 19. counter-reset: 创建或重置一个或多个计数器。这3个（17，18，19）一般一起用可以自动生成以下格式。就是自动生成1.1，1.2，2.1，2.2等等。 20.cursor: 定义了鼠标指针放在一个元素边界范围内时所用的光标形状。按照css里面规定鼠标的格式，不过在小程序里没发现有什么用。 21.direction:指定文本方向/书写方向。取值：默认值:ltr:文本方向从左到右。rtl:文本方向从右到左。说真的没看出来到底怎么实现的，跟我想象中的不一样啊。 22.empty-cells:是否显示表格中的空单元格（仅用于"分离边框"模式）。取值：hidden show 23.enable-background：废弃。 到此c，d，e开头的属性都过了一遍。 一：backface-visibility：属性定义当元素不面向屏幕时是否可见。就是在动画里旋转后，背面是不是显示。取值有：visible（可见），hidden（不可见）。 二：background，背景。之前有单独写背景看这里。 三：behavior：只有IE支持这个属性。就不说了。 四：block-size:逻辑宽度，取决于元素的writing-mode。Firefox支持。 五：border：边框。请看微信小程序css篇----边框(Border)。 六：bottom：设置图像的底部边缘。 对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。 对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。 七：box：盒子属性： 1. box-decoration-break: 取值：clone（克隆），slice（片式）。详情，还是看图： 2.box-shadow：阴影： box-shadow: h-shadow v-shadow blur spread color inset; h-shadow：水平阴影位置，允许负值。必须有 v-shaddow：垂直阴影的位置，允许负值。必须有 blur：模糊距离，可有。 spread：阴影的大小，可有。 color：阴影的颜色。可有 inset：从外层的阴影（开始时）改变阴影内侧阴影。 3.box-size:取值：box-sizing: content-box|border-box|inherit: 两个取值的区别在于是否会将pandding/margin算进去。 ~~~ view{ margin: 20rpx; padding: 20rpx; width: 200rpx; height: 200rpx; box-shadow: 10px 10px 5px #888888; box-sizing:content-box; } ~~~ 八：break-after,break-before,break-inside:主要是页面要是分页的时候属性。 break-after break-before break-inside 这个网站里有详细的解释。 1.fallback：是@counter-style 里的属性值。小程序里不知道怎么写，一写@counter-style 就报未定义的属性。不过在css中Firefox支持。点击打开链接。 2.fill：这是SVG里的属性。fill-opacity与fill-rule一样。详情请自行跳转。 3.filter：定义了元素的可视效果（例如；模糊与饱和）定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 取值：none：没有效果。 blur：高斯模糊。不接受百分比。设置为数值，数值越大越模糊。 brightness：给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 contrast：调整图像的对比度。值是0%的话图像会全黑。值是100%，图像不变。值可以超过100%,意味着会运用更低的对比.若没有设置值，默认1。 drop-shadow：drop-shadow(h-shadow v-shadow blur spread color)。给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。 <shadow>参数如下： <offset-x> <offset-y> (必须)这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).<blur-radius> (可选)这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利). <spread-radius> (可选)这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 <color> (可选)查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。 grayscale：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。 值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。 hue-rotate(deg)：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。 若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 invert(%)：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值 未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 opacity(%)：转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像 无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置， 值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性 能会提供硬件加速。 saturate(%)：转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。 其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。 sepia(%)：将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。 值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； url()：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。 4.flex:是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性.详情点击打开链接 5.flex-basis:用于设置或检索弹性盒伸缩基准值.取值：number，auto。flex-basis:100rpx,相当于设置了 100rpx的长度。 6.flex-direction 属性规定灵活项目的方向。 取值：row：默认值。灵活的项目将水平显示，正如一个行一样。 row-reverse：与row相同，但是以相反的顺序。 column：灵活的项目将垂直显示，正如一个列一样。 column-reverse：与column相同，同样是以相反的顺序。 7.flex-flow：属性是 flex-direction 和 flex-wrap 属性的复合属性，用于设置或检索弹性盒模型对象的子元素排 列方式。 8.flex-grow：用于设置或检索弹性盒的扩展比率。flex-grow:3, 相当于设置这个是别的3倍长度。 9.flex-shrink:用于设置或检索弹性盒的收缩比率.flex-shrink：相当于设置这个是别的1／3的长度。 10.flex-wrap ：规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。 取值：nowrap，规定灵活的项目不拆行或不拆列。 wrap：规定灵活的项目在必要的时候进行拆行活着拆列。 wrap-reverse：规定灵活的项目在必要的时候进行拆行活着拆列，不过是以相反的顺序。 11.float: 指定一个盒子（元素）是否应该浮动。取值：left right。 12.flood-color：SVG里的属性，设置补白区域的颜色。点击打开链接 13.flood-opacity: 同12，设置透明度。点击打开链接