1. 关于厂商前缀
- 顾名思义厂商前缀就是用来标注一些W3C还在试验阶段的一些样式属性，当某些属性正式推出以后，我们再次使用这个属性就不需要增加厂商前缀了。
2. 关于浏览器内核
浏览器内核现在分为4中
- 第一种：Geock 是火狐浏览器的内核 其厂商前缀为-moz-
- 第二种：Trident 是IE浏览器的内核 其厂商前缀为-ms-
- 第三种：webkit 是safari浏览器的内核 其厂商前缀为-webkit-
- 第四种：blink 是Chrome浏览器的内核
3.一些CSS3新特性:
- 字体镂空
text-stroke:1px #f00;
color:transparent;
-------------------------------------------------
实际使用中的书写规则:现将带前缀的都写上标准的在最后面写一次
例如：
-webkit-text-stroke:1px #f00;
-ms-text-stroke:1px #f00;
-o-text-stroke:1px #f00;
-moz-text-stroke:1px #foo;
text-stroke:1px #f00
2.圆角边框border-radius
1. border-radius:10px 20px 30px 40px / 10px 20px 30px 40px
斜线左边代表的是水平位置 斜线右边代表的是垂直位置
第一个值是左上角水平、第二个值是右上角水平、第三个值是右下角水平、第四个值是左下角水平
第五个值是左上角垂直、第六个值是右上角垂直、第七个值是右下角垂直、第八个值是左下角垂直
2. border-radius:10px 20px 30px 40px
第一个是左上角水平和垂直、第二个是右上角水平和垂直、第三个是右下角水平和垂直、第四个是左下角水 平和垂直
3. border-radius:10px 20px
第一个是左上角和右下角的值、第二个是左下角和右上角的值
4. border-radius:10px
这一个值代表了左上、右上、右下、左下
5. 其原理如下所示
以制定角的顶端，向内部引出垂直半径和水平半径
将水平半径和垂直半径相较于一个点
以这个点为圆心按照半径画圆或椭圆
图中红色部分就是圆角后的部分
一半实心圆一半空心圆的实现
style样式
.cirl{
width: 200px;
height: 100px;
border: 1px solid greenyellow;
border-top: 100px solid skyblue;
border-radius: 100px;
}
html代码
<div class="cirl">
</div>
- 阴影 box-shadow、text-shadow
text-shadow:
1.text-shadow: 1px 1px 3px red;
第一个值是水平位移量、第二个值是垂直位移量、第三个值是模糊度、第四个值是阴影颜色
第一个值第二个值正值为往右下、负值为往左上
2.text-shadow: 1px 1px 3px red , 2px 2px 3px orange;
可以加多个阴影,多个阴影之间用逗号分割
box-shadow
1.box-shadow:1px 1px 3px red;
跟文字阴影用法相同
但是box-shadow比文字阴影多了几个参数
box-shadow:1px 1px 3px 10px red;
第四个参数叫做外延值 表明阴影向外延伸的宽度
box-shadow:1px 1px inset red;
inset为内置阴影
彩虹圈小案例:
style样式:
.bub{
width: 100px;
height: 100px;
margin:80px auto;
border-radius: 50px 50px 0px 0px;
border-top: 1px solid red;
box-shadow: 1px 1px 3px 8px red,
1px 1px 3px 16px orange,
1px 1px 3px 24px yellow,
1px 1px 3px 32px green,
1px 1px 3px 40px skyblue,
1px 1px 3px 48px plum,
1px 1px 3px 56px purple;
transition: all 1s;
}
div样式:
<div class="bub">
</div>
- 线性渐变 gradients可以在两个或多个指定的颜色之间显示平稳的过渡
- 优点:以前想要时间颜色变化只能通过图片的方式，现在可以通过css减少了带宽的请求
Css3中定义了两种渐变
1.线性渐变 Linear Gradients 向下/向上/向左/向右/对角方向
background-image: linear-gradient(red,orange,blue,green,red);
注:渐变属于背景图片不属于背景色 所以要给background-image加此属性，默认是从上到下
background-image: linear-gradient(to top,red,orange,blue,green,red);
第一个to xxx来指定方向到哪边
background-image: linear-gradient(0deg,red,orange,blue,green,red);
第一个参数是角度 0度是圆的垂直半径最顶部 90度是圆的水平半径最右边 180是圆的垂直半径最下端 -90
是圆的水平半径最左端
background-image: linear-gradient(to right bottom,red,orange,blue,green,red);
可以设置两个方向参数 表明的是到右下 即从左上到右下
background-image:repeating-linear-gradient(red 1%,orange 1%,blue 20%,green 1%,red 1%);
代表的是重复设置每个颜色后面的百分比代表的是每一次重复中每个颜色所占的比例
2.渐性渐变
中心
background:radial-gradient(circle ,red,orange);
默认情况下渐变中心是center或ellipse circle是圆 ellipse是椭圆
background:radial-gradient(at 10px 20px ,red,orange);
(at x y)指的是以哪为圆心进行渐变 默认左上角为0,0点. x和y 可以用百分比代替 默认为椭圆可以用
circle at x y 给他变成一个圆
大小
background:radial-gradient(closest-side circle at 20px 20px,red,skyblue)
连着用与位置
最近边 closest-side
最远边 farthest-side
最近角 closest-corner
最远角 farthest-corner
形状
circle 圆
ellipse 椭圆
