边框

border-radius圆角边框

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

box-shadow盒阴影

box-shadow: offset-x offset-y blur spread color inset

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式]

offset-x：必需，取值正负都可。offset-x水平阴影的位置。

offset-y：必需，取值正负都可。offset-y垂直阴影的位置。

blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。

spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。

inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。可以写在参数的第一个或最后一个，其他位置无效。

border-image边界图片

border-image: url(border.png) 30 round

border-image: source slice width outset repeat

border-image-sourc：用于指定要用于绘制边框的图像的位置

border-image-slice：图像边界向内偏移

border-image-width：图像边界的宽度

border-image-outset：用于指定在边框外部绘制 border-image-area 的量

border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

 背景

background-image背景图片

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

background-image: url(flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

background-size背景图片的大小

可以指定像素或百分比大小。指定的大小是相对于父元素的宽度和高度的百分比的大小。

background-origin背景图像的位置区域

content-box, padding-box,和 border-box区域内可以放置背景图像。

background-clip背景剪裁

content-box, padding-box,和 border-box

 渐变

linear-gradien水平渐变

background-image: linear-gradient(to right，#e66465, #9198e5)

to bottom、to top、to right、to left、to bottom right

background-image: linear-gradient(angle, color-stop1, color-stop2)

使用透明度

background-image: repeating-linear-gradient(red, yellow 10%, green 20%)

径向渐变radial-gradient

background-image: radial-gradient(shape size at position, start-color, ..., last-color)

shape：circle 表示圆形，ellipse 表示椭圆形

background-image: radial-gradient(circle, red, yellow, green)

size ：渐变的大小。closest-side、farthest-side、closest-corner、farthest-corner

background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black)

background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black)

repeating-radial-gradient() 函数用于重复径向渐变

background-image: repeating-radial-gradient(red, yellow 10%, green 15%)

文本效果

text-shadow文本阴影

text-shadow: 5px 5px 5px #FF0000;

text-overflow溢出属性

ellipsis、clip

white-space:nowrap 

overflow:hidden;

white-space:nowrap文本不会换行会在同一行上继续，直到遇到<br>

word-wrap（overflow-wrap）对长的不可分割的单词进行分割并换行到下一行（允许断句）

normal只在允许的断字点换行

break-word在长单词或 URL 地址内部进行换行

word-break非中日韩文本的单词换行（怎么样断句）

normal默认行为

keep-all只能在半角空格或连字符处换行

break-all允许在单词内换行

【CSS3】

原文：https://www.cnblogs.com/Mijiujs/p/12121805.html