边框，背景和文本效果

边框（border）

border:(边框宽度)（边框样式）（边框颜色）

代码：

<style>
	div{
		border:10px solid #ccc;
	}
</style>

实例：

border-style:solid/double/dotted/dashed/none(五个值)

border-style:solid;(实线)
border-style:double;(双实线)
border-style:dotted;(点线)
border-style:dashed;(虚线)
border-style:none;(默认)

border-coler:色彩（一个值）即可

box-shadow:x y 模糊程度 模糊大小 颜色

border-radius:宽高一样情况下（50%）是圆/也可以设置四个准确的值依次顺序是左上，右上，右下，左下，依次设置弧度

background(背景)

复合属性背景设置简写

background:[background-color]背景颜色 [background-image]背景图片 [background-position]背景定位 [background-size]背景大小 [background-repeat]背景是否平铺 [background-attacchment]设置图片是否跟随滚动轴固定 [background-clip]背景裁剪 [background-origin]设置背景位置

1-background-color:颜色值即可

2-background-imgage:url()引入图片背景

3-background-position：left/right/cengter图片定位

4-background-size：通常设置两个值高（100%）宽（100%）

5-background-repeat：ropeatX（水平平铺） roteatY（纵轴平铺 ）no-repeat(不平铺) inherit(继承父元素)

6-background-attachment:scroll(背景图片随着页面的滚动而滚动，这是默认的) flexd(背景图片不会随着页面的滚动而滚动) local(背景图片会随着元素内容的滚动而滚动) initial（默认）inherit(继承父元素)

7-background-origin:padding-box(背景图像填充框的相对位置) border-box(背景图像边界框的相对位置) content-box(背景图像的相对位置的内容框)

文本效果

text-shadow：x y 模糊大小 阴影颜色；（文本阴影）

实例:text-shadow:1px 1px 5px indianred;

text-overflow:clip/ellipsis;(如何展示溢出内容)

clip实例：

无法省略，只是超出部分隐藏；
ellipsis实例：

带有省略号，隐藏部分变为省略号；
注意！！！！（溢出隐藏：overflow: hidden;强制一行：white-space:nowrap;必须和text-overflow一起使用）

word-wrap:break-word;（长文本换行）

word-break:keep-all/break-all;（长文本换行的不同）

keep-all实例：

break-all实例：

两个换行的方式有着一些不相同keep-all是等一个单词完整输入后换行break-all是让一个单词被拆分后强制换行

font-family字体设置