css3 背景

background

背景缩写属性可以在一个声明中设置所有的背景属性。
可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。

各值之间用空格分隔，不分先后顺序。
background：url() no-repeat position/size fixed;

body
{ background: #00ff00 url('') no-repeat fixed center; 
}

background-color

值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

body
{/*lightsalmon 浅橙色*/background-color:lightsalmon;
}

background-image

值	描述
url(‘URL’)	图像的URL
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 “图像”(从上到下)
radial-gradient()	用径向渐变创建 “图像”。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 “图像”。
repeating-radial-gradient()	创建重复的径向渐变 “图像”
inherit	指定背景图像应该从父元素继承

background-repeat

值	描述
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复

body
{background-image:url('paper.gif');/* y轴方向重复 */background-repeat:repeat-y;
}

background-attachment

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。

body
{ background-image:url('smiley.gif');background-repeat:no-repeat;/* 图片在视口中固定  不会随着页面的滚动而滚动*/background-attachment:fixed;
}

background-position

值	描述
left top	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions

body
{background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;
}

background-origin

background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。

值	描述
border-box	从border区域（含border）开始显示背景图像。
padding-box	从padding区域（含padding）开始显示背景图像。
content-box	从content区域开始显示背景图像。

background-clip

background-clip属性指定背景绘制区域。

值	描述
border-box	从border区域（含border）开始向外裁剪背景。
padding-box	从padding区域（含padding）开始向外裁剪背景。
content-box	从content区域开始向外裁剪背景。
text	从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

background-size

值	描述
length(px)	用长度值指定背景图像大小。不允许负值。
percentage(%)	用百分比指定背景图像大小。不允许负值。
auto	背景图像的真实大小。
cover	将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain	将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

div
{background:url(img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;
}

css3 边框

box-shadow

值	描述
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

/* 语法 */
div{ box-shadow: h-shadow v-shadow blur spread color inset; }

border-image

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：

border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：

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 圆角

border-radius属性

length(px)： 用长度值定义圆形半径或椭圆的半长轴，半短轴。不允许负值
percentage(%)： 用百分比定义圆形半径或椭圆的半长轴，半短轴。水平方向百分比参照元素宽度（非内容宽度），垂直方向参照元素高度。不允许负值

border-radius取值

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

选择单个角设置圆角

border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

#rcorners1 {border-radius: 15px 50px 30px 5px;background: #8AC007;padding: 20px;width: 200px;height: 150px;
}#rcorners2 {border-radius: 15px 50px 30px;background: #8AC007;padding: 20px;width: 200px;height: 150px;
}#rcorners3 {border-radius: 15px 50px;background: #8AC007;padding: 20px;width: 200px;height: 150px;
}

css3 渐变

/* 语法 */
background-image: linear-gradient(direction, color-stop1,color-stop2, …);
background-image: radial-gradient(shape size at position, start-color, …, last-color);

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

• 线性渐变 - 从上到下（默认情况下）
• 线性渐变 - 从左到右
• 线性渐变 - 对角

/* 从上到下的线性渐变：默认 */
background-image: linear-gradient(#e66465, #9198e5);
/* 从左到右的线性渐变： */
background-image: linear-gradient(to right, red , yellow);
/* 从左上角到右下角的线性渐变： */
background-image: linear-gradient(to bottom right, red, yellow);
/* 从左到右的线性渐变：其他写法 chrome兼容*/
background-image: -webkit-linear-gradient(left, red, yellow);
/* 从左到右的线性渐变：其他写法 chrome兼容*/
background-image: -webkit-linear-gradient(left top, red, yellow);

径向渐变（Radial Gradients）- 由它们的中心定义

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

/* 语法 */
background-image: radial-gradient(shape size at position, start-color, …, last-color);

/* eg */
background-image: radial-gradient(red, yellow, green);

css3 文本效果

text-shadow

文本阴影

h1
{	/* 	四个值依次代表：水平阴影，垂直阴影，模糊的距离，以及阴影的颜色 */text-shadow: 5px 5px 5px #FF0000;
}

box-shadow

盒子阴影

div {/* 	四个值依次代表：水平阴影，垂直阴影，模糊的距离，以及阴影的颜色 */box-shadow: 10px 10px 5px #888888;
}
/* 卡片实例 */
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;
}

值	描述
none	无阴影
length	第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
length	第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
length	第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
length	第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
color	定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
inset	定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影

text-overflow

指定应向用户如何显示溢出内容

p.test1 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;/* 文本溢出显示方式 */text-overflow: clip; /*截断*/text-overflow: ellipsis; /*未显示的部分显示为 ... */
}

word-wrap

允许长文本换行

p.test
{width:11em; border:1px solid #000000;/* 按单词换行 中文无效 */word-wrap:break-word;
}

word-break

单词拆分换行属性指定换行规则

p.test1 {/* 按单词截断 */word-break: keep-all;/* 全部截断 */word-break: break-all;
}

2020/11/17