-
边框
-
border：2px solid； -
圆角 border-radius，
div{ border:2px solid; border-radius:25px; //也可以单独设置4个角的值 }-
盒阴影 box-shadow
div { box-shadow: 10px 10px 5px #888888; // 参数分别为：水平阴影的位置（可以是负数），垂直阴影的位置，模糊距离，(模糊尺寸)，颜色，inset } -
边界图片 border-image
-
-
背景
-
background-image：
background-image: url(img_flwr.gif), url(paper.gif); -
background-size 设置背景图片大小
-
background-origin：指定了背景图像的位置区域
-
background-clip：从指定位置开始绘制
background-clip: content-box /padding-box ；
-
-
渐变
#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ //注意，没有设置默认方向，则默认是从上到下 } //从左到右的写法 #grad { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 */ } 对角线将right改成bottom right，如果想要定制角度，可以把right改成一个特殊的角度比如 #grad { background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(180deg, red, blue); /* 标准的语法 */ }
-
文本效果
- text-shadow，文本阴影
- box-shadow，盒子阴影
- text-overflow，属性指定应向用户如何显示溢出内容，可选值为clip（修建文本），ellipsis（显示省略号），string 使用给定的字符串代表修建的文本
- 注意和overflow的区别
- word-wrap，设定长单词是否可以换行，可选值：normal（默认，只在允许的断字点换行），break-word（在长单词或者URL地址内部进行换行）
- word-break，设置浏览器默认的换行规则
-
字体，掠过不表
-
2D转换
-
transform 属性向元素应用 2D 或 3D 转换。
-
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
-
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
-
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
-
skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
- skewX();表示只在X轴(水平方向)倾斜。
- skewY();表示只在Y轴(垂直方向)倾斜。
-
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
-
div { transform: rotate(30deg); // 角度用deg表示 transform: translate(50px,100px); transform: scale(2,3); /* 标准语法 */ //这个是倍数，X轴变成原来的2倍，Y轴成为原来的3倍 }
-
-
3D转换
- rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。同理 rotateY()
- 啊其实将2D转换定义到某个坐标，就可以实现3D转换
-
过渡
-
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
div { width:100px; height:100px; background:yellow; transition: width 2s, height 2s, transform 2s; // 这里定义了transition的时间是2S，如果是0S就看不到变化效果 -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; //设置鼠标悬停显示的效果 }
-
-
动画
-
@keyframes myfirst { from {background: red;} to {background: yellow;} } 定义了关键帧，然后要捆绑到某个选择器 div { animation: myfirst 5s; }
-
-
多列，可以创建多个列对文本进行布局
- column-count，定义元素应该被分隔的列数
- column-gap，列之间的间隔
- column-rule，设置列之间的宽度、样式和颜色规则
-
用户界面，没看懂啊
-
图片
- border-radius，设置图片圆角
- max-width 设置响应式尺寸的最大值
- filter：滤镜
-
按钮
-
分页
-
框大小
- 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距（哇，我居然一直记错了）
- 但是如果设置了box-sizing: border-box，那么width和height就会包含pedding和border
-
弹性盒子（其实就是Flex）
- 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行
-
多媒体查询
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 (智能手机横屏，竖屏) 。
- 分辨率
-
多媒体查询实例