这篇文章上次修改于 3 个月前，可能其部分内容已经发生变化，如有疑问可询问作者。
最近受到了App Store主页风格的影响，正巧又看到了sketch官网的设计，所以深受卡片式的影响。真巧最近在改别人的主题，于是就想自己去写一套卡片式风格的typecho主题。
那么，我就开始边学css/js，边写主题，把学的用到的都记录下来。
CSS颜色渐变
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
CSS卡片式颜色变换（CSS 子元素选择器）
对于多个卡片可以颜色变换 使用nth-child()函数判断第几个或者让第一个标签的颜色变换
可以使用
> 选择器变换class中的属性比如
判断.block-plusins-list中的span标签个数 （第三个） 让其下的子元素 .colorgradient-card 属性值更换
那么原html中应该这样写
tva2.sinaimg.cn/large/006tKfTcly1g1bmocgx9yj30fp09yad9.jpg)
CSS 卡片添加阴影
box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 ，阴影也会有圆角效果。多个阴影的z-ordering 和多个
border-radiushttps://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
text shadows
规则相同(第一个阴影在最上面)。https://developer.mozilla.org/en/CSS/text-shadow
那么整一个卡片式风格可以写成这样(shetch样式)
CSS 鼠标移入放大平滑过渡
CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。
总体卡片式设计
CSS弹性布局（Flex 布局）
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局。
Webkit 内核的浏览器，必须加上
-webkit前缀。注意，设为 Flex 布局以后，子元素的
float、clear和vertical-align属性将失效。Flex教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
CSS 控制不同设备的显示方案
@media 查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
如果文档宽度小于 300 像素则修改背景颜色(background-color):
使用 @media 查询来制作响应式设计：
CSS3 @media 查询
http://www.runoob.com/cssref/css3-pr-mediaquery.html
文章标题:
文章作者:
文章链接: [复制]
最后修改时间:
商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
亲亲留个评论再走呗
正在加载评论区...