CSS3 边框
border-radius
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"，如：背景颜色，边框，背景图片。
border-radius: 1-4 length|% / 1-4 length|%
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
div
{
border:2px solid;
border-radius:25px;
}
也可以单独定义单个角的弧度
- border-top-left-radius
定义了左上角的弧度 - border-top-right-radius
定义了右上角的弧度 - border-bottom-right-radius
定义了右下角的弧度 - border-bottom-left-radius
定义了左下角的弧度
box-shadow
盒阴影
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
div
{
box-shadow: 10px 10px 5px #888888;
}
border-image
border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
在 div 中使用图片创建边框:
Border
border-image: source slice width outset repeat|initial|inherit;
| 值 | 描述 |
| border-image-source | 用于指定要用于绘制边框的图像的位置 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。 |
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
CSS3 背景
CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
CSS3 的 background-origin 属性
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
background-origin
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
CSS3 多个背景图像
CSS3 允许你在元素上添加多个背景图像。
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
background-clip: border-box|padding-box|content-box;
| 值 | 说明 |
|---|---|
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
CSS3 渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
CSS3 线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
线性渐变的实例：
线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
线性渐变 - 从上到下（默认情况下）,代码如下
//从上到下
#grad {
background-image: linear-gradient(#e66465, #9198e5);
}
从左到右的线性渐变，代码如下
//从左到右
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}
线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
//从左上角到右下角
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
background-image: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
渐变角度
但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
使用多个颜色结点
//带有多个颜色结点的从上到下的线性渐变
#grad {
background-image: linear-gradient(red, yellow, green);
}
//带有彩虹颜色和文本的线性渐变
#grad {
/* 标准的语法 */
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
使用透明度
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
#grad {
//重复的线性渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
径向渐变的实例：
径向渐变
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
//颜色结点均匀分布的径向渐变
#grad {
background-image: radial-gradient(red, yellow, green);
}
//颜色结点不均匀分布的径向渐变
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
/*形状为圆形的径向渐变*/
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
/*带有不同尺寸大小关键字的径向渐变*/
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
文本及阴影效果
CSS3 的文本阴影
文本阴影
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
text-shadow: h-shadow v-shadow blur color
注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色 |
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 box-shadow属性
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| spread | 可选。 阴影尺寸。 |
| color | 可选。阴影的颜色 |
| insect | 可选。外阴影转到内阴影 。 |
div {
box-shadow: 10px 10px 5px #888888;
}
接下来给阴影添加颜色
div {
box-shadow: 10px 10px grey;
}
接下来给阴影添加一个模糊效果
div {
box-shadow: 10px 10px 5px grey;
}
你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果
#boxshadow {
position: relative;
b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
pa dding: 10px;
bac kground: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
阴影的一个使用特例是卡片效果
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容
text-overflow: clip|ellipsis|string
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：
word-wrap: normal|break-word;
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word | 在长单词或 URL 地址内部进行换行。 |
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
p {word-wrap:break-word;}
CSS3 单词拆分换行
word-break属性指定非CJK脚本的断行规则。
提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。
word-break: normal|break-all|keep-all;
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
CSS3字体
使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch | ... | 可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style | ... | 可选。定义字体的样式。默认是 "normal"。 |
| font-weight | ... | 可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
CSS3 转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
translate() 方法
translate
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
rotate() 方法
rotate
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
scale() 方法
scale
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
skew() 方法
transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
matrix() 方法
matrix
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
rotateX() 方法
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
rotateY() 方法
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}
transform-origin 属性
transform-Origin属性允许您更改转换元素的位置。
2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
注意： 使用此属性必须先使用 transform属性。
| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于 X 轴的何处。 |
| y-axis | 定义视图被置于 Y 轴的何处。 |
| z-axis | 定义视图被置于 Z 轴的何处。 |
transform-style
transform--style属性指定嵌套元素是怎样在三维空间中呈现。
注意： 使用此属性必须先使用transform属性.
| 值 | 描述 |
|---|---|
| flat | 表示所有子元素在2D平面呈现。 |
| preserve-3d | 表示所有子元素在3D空间中呈现。 |
perspective 属性
多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
注意：perspective 属性只影响 3D 转换元素。
提示: 请与perspective-origin属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
| 值 | 描述 |
|---|---|
| number | 元素距离视图的距离，以像素计。 |
| none | 默认值。与 0 相同。不设置透视。 |
perspective-origin 属性
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
| 值 | 描述 |
|---|---|
| x-axis | 定义该视图在 x 轴上的位置。默认值：50%。 |
| y-axis | 定义该视图在 y 轴上的位置。默认值：50%。 |
backface-visibility 属性
backface-visibility 属性定义当元素背面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
| 值 | 描述 |
|---|---|
| visible | 背面是可见的。 |
| hidden | 背面是不可见的。 |
transform 属性
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform: none|transform-functions;
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
/*应用于宽度属性的过渡效果，时长为 2 秒*/
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。
多项改变
要添加多个样式的变换效果，添加的属性由逗号分隔：
/*添加了宽度，高度和转换效果*/
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
过渡属性
下表列出了所有的过渡属性:
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
CSS3 动画
要创建 CSS3 动画，你需要了解 @keyframes 规则。
- @keyframes 规则是创建动画。
- @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
/*当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变*/
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
CSS3 多列
CSS3 可以将文本内容设计成像报纸一样的多列布局
CSS3 创建多列
column-count 属性指定了需要分割的列数。
column-count: number|auto;
| 值 | 说明 |
|---|---|
| number | 列的最佳数目将其中的元素的内容无法流出 |
| auto | 列数将取决于其他属性，例如："column-width" |
/*将 <div> 元素中的文本分为 3 列*/
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
CSS3 多列中列与列间的间隙
column-gap 属性指定了列与列间的间隙。
/*列与列间的间隙为 40 像素*/
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
CSS3 列边框
column-rule-style 属性指定了列与列间的边框样式
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
| 值 | 描述 |
|---|---|
| none | 定义没有规则。 |
| hidden | 定义隐藏规则。 |
| dotted | 定义点状规则。 |
| dashed | 定义虚线规则。 |
| solid | 定义实线规则。 |
| double | 定义双线规则。 |
| groove | 定义 3D grooved 规则。该效果取决于宽度和颜色值。 |
| ridge | 定义 3D ridged 规则。该效果取决于宽度和颜色值。 |
| inset | 定义 3D inset 规则。该效果取决于宽度和颜色值。 |
| outset | 定义 3D outset 规则。该效果取决于宽度和颜色值。 |
div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
column-rule-width 属性指定了两列的边框厚度
div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
column-rule-color 属性指定了两列的边框颜色：
div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
column-rule 属性是 column-rule-* 所有属性的简写。
column-rule: column-rule-width column-rule-style column-rule-color;
| 值 | 说明 |
|---|---|
| column-rule-width | 设置列中之间的宽度规则 |
| column-rule-style | 设置列中之间的样式规则 |
| column-rule-color | 设置列中之间的颜色规则 |
div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
指定元素跨越多少列
/*指定 <h2> 元素跨越所有列*/
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
指定列的宽度
column-width 属性指定了列的宽度。
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
CSS3 用户界面
CSS3 调整尺寸(Resizing)
CSS3中，resize属性指定一个元素是否应该由用户去调整大小。
?注意：resize属性适用于计算其他元素的溢出值是不是"visible"。
resize: none|both|horizontal|vertical
| 值 | 描述 |
|---|---|
| none | 用户无法调整元素的尺寸。 |
| both | 用户可调整元素的高度和宽度。 |
| horizontal | 用户可调整元素的宽度。 |
| vertical | 用户可调整元素的高度。 |
div
{
resize:both;
overflow:auto;
}
CSS3 方框大小调整(Box Sizing)
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
box-sizing: content-box|border-box|inherit:
| 值 | 说明 |
|---|---|
| content-box | 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
| border-box | 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 指定 box-sizing 属性的值，应该从父元素继承 |
/*规定两个并排的带边框方框*/
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
CSS3 外形修饰（outline-offset ）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
- 轮廓不占用空间
- 轮廓可能是非矩形
outline-offset: length|inherit:
| 值 | 描述 |
|---|---|
| length | 轮廓与边框边缘的距离。 |
| inherit | 规定应从父元素继承 outline-offset 属性的值。 |
/*规定边框边缘之外 15 像素处的轮廓*/
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
其它特性
| 属性 | 说明 |
|---|---|
| appearance | 允许您使一个元素的外观像一个标准的用户界面元素 |
| icon | 为创作者提供了将元素设置为图标等价物的能力。 |
| nav-down | 指定在何处使用箭头向下导航键时进行导航 |
| nav-index | 指定一个元素的Tab的顺序 |
| nav-left | 指定在何处使用左侧的箭头导航键进行导航 |
| nav-right | 指定在何处使用右侧的箭头导航键进行导航 |
| nav-up | 指定在何处使用箭头向上导航键时进行导航 |
CSS 图片
圆角图片
跟border-radius用法一致。
缩略图
我们使用 border 属性来创建缩略图。
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<img src="paris.jpg" alt="Paris">
响应式图片
响应式图片会自动适配各种尺寸的屏幕。
img {
max-width: 100%;
height: auto;
}
更多见响应式设计。
图片文本
文本图片
卡片式图片
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
图片滤镜
CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。
可设置元素的灰度,通过filter: grayscale(1)设置整个body为灰色，在2020年清明节全国哀悼期间，很多网站采用这个设置。
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
图片滤镜
响应式图片相册
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
CSS 按钮
按钮颜色
我们可以使用 background-color 属性来设置按钮颜色
按钮大小
我们可以使用 font-size 属性来设置按钮大小
圆角按钮
我们可以使用 border-radius 属性来设置圆角按钮
按钮边框颜色
我们可以使用 border 属性设置按钮边框颜色
鼠标悬停按钮
我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
按钮阴影
我们可以使用 box-shadow 属性来为按钮添加阴影
禁用按钮
我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。
提示: 我们可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
按钮宽度
默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:
提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。
按钮组
移除外边距并添加 float:left 来设置按钮组
带边框按钮组
我们可以使用 border 属性来设置带边框的按钮组
按钮动画
通过伪类设置形变效果，transition设置动画和过渡。
网友评论