前缀
由于css3的许多属性在当初还未写入w3c规范，所以，不同的浏览器对其某些属性前面加了不同的前缀，比如border-raidus
-webkit-border-radius: 50%; chrome safari
-ms-border-radius: 50%; ie
-o-border-radius: 50%; opera
-moz-border-radius: 50%; firfox写一个半圆
div {
width: 100px;
height: 50px;
background-color: red;
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
}也可以填写具体的像素值，如
border-top-right-radius: 50% 30px;一片叶子
div {
height: 100px;
width: 80px;
background-color: green;
border-top-left-radius: 70% 100%;
border-top-right-radius: 30% 30%;
border-bottom-right-radius: 100% 70%;
}像素值也可以是相对单位em，em是相对父级font-size的单位，浏览器默认的font-size是16px（即1em = 16px），也可以修改父级的font-size的值来改变em的大小
box-shadow
box-shadow: 20px 20px 5px 10px #333;像素值分别是：x轴偏移量，y轴偏移量，模糊半径，扩展半径，颜色；通过改变前两项的正负值来改变阴影的方位 。还有一个值是可加在最后---inset，向内部投影。
写一个带阴影的小按钮
.demo1{
height: 40px;
width: 100px;
border-radius: 20px;
box-shadow: 0px 0px 5px 0px #333;
}text-shadow
text-shadow: 10px 10px 3px grey;参数分别是x-offset，y-offset，blur，color
颜色值RGBA
ext-shadow: 10px 10px 3px rgba(255, 0, 0, 0.5);渐变色
线性渐变
background: linear-gradient(to bottom, #fff 0%, red 50%, #000 100%)第一个值可以填“to top”，“to top right”等等方向，后面的属性值都为颜色+百分比
background: linear-gradient(0deg, #fff 0%, red 50%, #000 100%)第二种方式填写角度，0度的效果类似于to top， 180度相当于to bottom
径向渐变
background: radial-gradient(circle 50px at 50px 30px, #fff 0%, red 30%, #000 100%)第一个参数的意思是，圆形，渐变半径50px，渐变中心位于(50,30)的位置
注意：渐变中心有一个关键字center表示正中心，此外，如果中心点只写一个值，那么另一个值默认是50%
background: radial-gradient(ellipse 50px 30px at 50% 50% , #fff 0%, red 30%, #000 100%)另一种椭圆的渐变，只是原来半径的位置变成了横轴和纵轴，
注意：我们渐变最后一个值可以写成trnasparent，表示透明色
word-wrap
看下面的代码
.demo1{
height: 100px;
width: 100px;
background: red;
/* word-wrap: break-word; */
}<div class="demo1">fffffffffffffffffffffffffffffff</div>虽然我们给div设置了宽高但是，这里会默认这一串f是一个单词，所以这里不会行，把注释处取消，就可以实现换行
font-face
我们可以使用网上的一些字体www.w3cplus.com/content/css…，引入的方式就是在样式里面添加如下代码，这里引入的字体样式是strawberry
@font-face{
font-family: "straw";
src: url("Strawberry Blossom.ttf");
}然后我们就可以在后面的样式中使用这个字体
.demo1{
height: 100px;
width: 100px;
background: red;
word-wrap: break-word;
font-family: "straw";
}border-image
border-image: url("pic1.jpg") 20 stretch;导入图片边框，第一个参数是图片的链接，第二个参数是在图片的四角裁取边长20px的正方形做边框的四角，stretch参数是将四个正方形中间的部分进行拉伸，repeat是将四角中间的部分进行重复，从中间向两侧铺满边框，如果长度不为整数倍那么图片会被截断，round也是是将中间的图片平铺到边框，不过如果边框中间部分不是图片中间部分的整数倍，那么会将图片中间部分缩放平铺，而不是截断；
background-origin
通常背景图片都是从盒模型的padding处引入，如：
.demo1{
height: 100px;
width: 100px;
background: url("pic1.jpg") no-repeat;
border: 20px solid rgba(255, 0, 0, 0.5);
margin: 40px;
}想要从别处引入背景图片可以使用此样式
background-origin: border-box; 从border处引入
background-origin: content-box; 从content处引入 background-clip
我们发现引入背景图片从 padding开始的话，右边和下方的border是会有图片的，此方法可以裁剪背景图片，根据不同的属性值，会有不同的效果，默认值是no-clip
background-clip: padding-box;
background-clip: content-box;
background-clip: border-box;在文字中填充图片效果
background-image: url("pic1.jpg");
background-repeat: no-repeat;
background-color: yellow;
background-clip: border-box;
text-fill-color: -webkit-background-clip;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;background-size
控制背景图片大小，有五个属性：
auto：默认值，不改变图片
长度值：200px 200px 分别为宽和高的设置，当设置一个值时宽度为当前值，高等比缩放
百分比：50% 50% 宽高的百分比，当设置一个值时同上
cover：一张图片铺满背景，如果比例不符则截断图片
contain：尽量让背景内保存一张完整的图片
background-position
前端经常用到的雪碧图来展示小图标，比如豆瓣的评分星数，就使用position方法来改变背景图片展示的位置得以实现
div {
height: 15px;
width: 50px;
border: 3px solid black;
background-image: url(pic1.jpg);
background-repeat: no-repeat;
background-position: 0 -15px; x轴 y轴
}css3常用的属性选择器
参考www.w3school.com.cn/cssref/css_…
