css3边框 背景 文本内容整合
边框
圆角
- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radlius
- border-bottom-right-radius
盒子阴影
-
box-shadow
水平偏移值 垂直偏移值 模糊值 外延值 颜色 box-shadow:5px 5px box-shadow:5px 5px #ccc box-shadow:5px 5px 10px #ccc box-shadow:left top blur offset color inside （设置为内阴影，默认外阴影）, .... 只有一条边有阴影：（一条边的偏移值为0，模糊值外延值不用设置） box-shadow:0px -2px #ccc;(上边) box-shadow:2px 0px #ccc;(右边)
边框图片
-
border-image-source 图片地址
-
border-image-slice 图片截取方式 值 浮点数/百分比
原图的1/3是最好的设置 border-image-slice:27; 一个值表示四个方向 border-image-slice:54 27; 两个值表示上下、左右 border-image-slice: 27 54 50%;三个值表示上、左右、下 -
border-iamge-width 边框图片厚度 值 长度单位
-
border-image-outset 外延 值 长度单位
-
borde-image-repeat 延伸（平铺）方式 值 stretch/repeat/round/space
stretch:用拉伸方式来填充边框背景图 repeat:平铺方式填充 当图片碰到边界时，若超过则被截断 round:平铺方式填充 图片会根据边框的尺寸动态调整图片的大熊啊直至正好可以铺满整个边框 space: 平铺方式填充 动态调整图片之间的间距直至正好可以铺满整个边框 -
border-image
border-image:source slice/width/outset repeat
盒子倒影
-
box-reflect
注意倒影不占位置 -webkit-box-reflect:direction offset 遮罩 direction: above/below/left/right offset:长度单位/百分比（指倒影与对象之间的间隔） 遮罩（mask-box-reflect）：url/渐变 文字倒影： margin-bottom:200px; -webkit-box-reflect:below 1px linear-gradient(transparent,#fff); 图片倒影： margin-bottom:500px;设margin因为倒影不占位置 width: 400px; height:300px; background:url(./dist/images/2.jpg); background-size:100% 100%; -webkit-box-reflect:below 3px linear-gradient(180deg,transparent,#fff);
CSS3 背景属性
新增属性
-
background-origin 原点
- padding-box 从padding（含padding）区域开始显示背景图像
- border-box
- content-box
-
background-clip 裁切
-
border-box :从border区域（不含border）开始向外裁剪区域
-
padding-box
-
content-box
-
text
背景图片文字： background-image:url(./dist/images/2.jpg); -webkit-background-clip:text; color:transparent; 渐变色文字： background:linear-gradient(180deg,cyan,pink); -webkit-background-clip:text; color:transparent;
-
-
background-size cover/contain/length length 不允许为负值 一个值用于定义宽度 第二个值默认为auto.
背景图像尺寸的大小：auto：背景图像的真实大小 cover:铺满整个盒子（覆盖容器，可能超出） contain：优先不超出边界
多重背景
多重背景：
background:url(./dist/images/bg-tl.png) no-repeat 0px 0px,
url(./dist/images/bg-tr.png) no-repeat 100% 0px,
url(./dist/images/bg-bl.png) no-repeat 0px 100%,
url(./dist/images/bg-br.png) no-repeat 100% 100%;
多重背景渐变
body{
margin:0;
background-color:pink;
background-image:radial-gradient(transparent 0%,transparent 98% ,#000 100%),radial-gradient(transparent 0%,transparent 98%,#000 100%);
background-size:80px 80px;
background-position:0 0,40px 40px;
}
CSS文本属性
文本阴影
-
text-shadow
四个值分别是：左偏移值、右偏移值、模糊值（不能为负值）、颜色 text-shadow:offset_left offset_right blur color 3D文字： text-shadow: 1px 0px 0px rgb(188,188,188), 2px 0px 0px rgb(177,177,177), 3px 0px 0px rgb(166,166,166), 4px 0px 0px rgb(155,155,155), 5px 0px 0px rgb(144,144,144), 6px 0px 0px rgb(133,133,133), 7px 0px 0px rgb(122,122,122), 8px 0px 0px rgb(111,111,111), 9px 0px 0px rgb(99,99,99), 10px 0px 0px rgb(88,88,88);
文本换行
- word-wrap 设置当内容超过指定容器的边界时是否断行
- 值 noraml 允许内容顶开或溢出指定的容器边界
- break-word 内容将在边界内换行，若需要单词内部允许断行 CSS改为 overflow-wrap
- word-break 值 normal/keep-all/break-all
- white-space 设置空格的处理方式
- 值 noraml
- pre 保留空格
- /nowrap/ 强制在同一行内显示，合并文本间的多余空白，知道文本结束或遇到br对象
- pre-wrap/ 保留空白符，但是正常的进行换行
- pre-line 合并空白符，但是正常进行换行
文本溢出
- text-overflow
- 值 clip 溢出是将溢出部分裁切掉
- ellipsis 将溢出部分 替换为（...）概述要生效 必须设置overflow不是visible值， 并且设置 white-space为nowrap
文字修饰
- text-decoation
- text-decoraion-line none/underline/overline/line-through
- text-decoration-style solid/dotted/double/dashed/wavy
- text-decoration-color
- text-decoration-skip 文本装饰线条必须略过内容中哪些部分
- text-decoration-position
文字描边
- -webkit-text-fill-color 文字填充色 和color效果差不多
- -webkit-text-stroke 文字描边
- -webkit-text-stroke-width 文字描边厚度
- -weibkit-text-stroke-color 文字描边颜色
其他属性
- text-transform
- 值 none
- /capitalize 将每个单词的第一个字母转换成大写
- uppercase/ 将每个单词转换成大写
- lowercase 将每个单词转换成小写
- tab-size 必须把white-space 设置为 pre/pre-wrap/pre-line 才生效 值 长度单位 规定制表符 长度
- text-align start/end
- text-align-last 只设置最后一行 值 同text-align
