1.圆角， 圆形
<body>
<div class="course1">Rounded corners!</div>
<div class="course2">Rounded corners!</div>
<div class="course3">Rounded corners!</div>
</body>
//css
*{margin: 0; padding: 0;}
div{
font-weight: 400;
text-align: center;
margin-bottom: 20px;
}
.course1{
width: 200px;
height: 150px;
padding-top: 20px;
border-radius: 25px;
background-color: #4CAF50 !important;
}
.course2{
width: 200px;
height: 150px;
padding-top: 20px;
border-radius: 25px;
border: 2px solid #4CAF50;
}
.course3{
width: 200px;
height: 150px;
padding-top: 20px;
border-radius: 25px;
/* border: 2px solid #4CAF50; */
background: url(http://img2.imgtn.bdimg.com/it/u=1574766993,2953465803&fm=23&gp=0.jpg);
background-position: center center;
background-repeat: no-repeat;
}
定义顺序是从左上角开始，顺时针开始，单位可以是px也可以是百分值，当然百分值是相对于作用的角的两条边，例如我这里写border-radius:10% 30% 50% 70%
,10%指的就是左上角的左边(高height)和上边(宽width)的10%，所以设置50%就能成为一个圆形的道理就在这里； border-radius – css-stricks
2.颜色透明度的支持:rgba和hsla
.foo{
background:rgba(253,208,91,0.5)
}
.foo2{
background:#fed163;
opacity:0.5;
}
.foo3{
background:#fed163;
}
.foo4{
background-color: hsla(43, 98%, 67%, 0.5);
}
H:Hue(色相)
；0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360； S
：Saturation(饱和度)。取值为：0.0% - 100.0%； L
：Lightness(亮度)。取值为：0.0% - 100.0%； A
：Alpha透明度。取值0~1之间； 兼容性依旧IE，要在IE9才能支持,上图是色相的表,这里有一个在线专门转换这些颜色的网站，就不继续深究了
3.外部引入字体@font-face
@font-face {
font-family: 'Roboto Slab';
src: url('../fonts/RobotoSlab-Regular-webfont.eot');
src: url('../fonts/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/RobotoSlab-Regular-webfont.woff') format('woff'),
url('../fonts/RobotoSlab-Regular-webfont.ttf') format('truetype'),
url('../fonts/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
font-weight: normal;
font-style: normal;
}
可加载服务器端的字体文件，让客户端显示本地没有安装的字体； 里面有eot、woff、ttf、svf其实都是字体，只不过是为了兼容不同版本的和不同的浏览器都能正确显示； 但是由于老外用的都是26个字母，不比中国文字，所以要设定英文还好，如果通篇要设定中文的字体，将会使得字体文件很大，所以用@font-face实现效果的时候，可以用到youziku.com这个网站，就是按需要截取，根据文章所涉及的文字生成小字库，将流量开销减少到最低；
4.元素阴影
.foo{
box-shadow:5px 5px 5px #ccc;
}
很多时候，页面上能够用页面阴影做出来一些，立体的效果，例如鼠标上去之后，出现一个阴影搞得好想这一块浮出来了一样； 语法全称是：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow
:必须、水平阴影的位置，允许负值； v-shadow
:必须、垂直阴影的位置，允许负值； blur
:可选，模糊距离，就是这团阴影能够化开多少； spread
:可选，阴影的尺寸， color
:可选，阴影的颜色， inset
:可选，将外部阴影(outset)改为内部，用的很少；
demo
5.背景色渐变
渐变，CSS3定义的时候分了两个类型： 线性渐变（Linear Gradients）
- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）
-
由它们的中心定义 而且，你使用的时候，必须定义至少两种颜色节点，要不然怎么变，这个颜色节点就是你想要呈现的平稳过渡的颜色； 并且，还可以设置一个起点和一个方向(也就是角度，deg)； 图片标题
<style id="jsbin-css">
div{
height:200px;
width:100%;
margin-top:10px;
color:#fff;
line-height:200px;
text-align:center;
}
.foo{
background:linear-gradient(yellow,red,blue)
}
.foo2{
background:linear-gradient(to left,yellow,red,blue);
}
.foo3{
background:linear-gradient(to bottom right,yellow,red,blue);
}
.foo4{
background:linear-gradient(45deg,yellow,red,blue);
}
.foo5{
background:radial-gradient(yellow,red,blue);
}
</style>
</head>
<body>
<div class='foo'>默认渐变</div>
<div class='foo2'>设定方向渐变</div>
<div class='foo3'>设定对角渐变</div>
<div class='foo4'>使用角度渐变</div>
<div class='foo5'>径向渐变</div>
</body>
6.2D 转换：放大、缩小、偏移、旋转 2D转换：里面有很多方法: translate()
是让元素根据当前位置移动，类似在笛卡尔坐标系的第四象限中一样，里面的translateX多用来搭配负margin来调整position:absolute的元素的居中位置，例如transform:translate(100px,10px)
;就是在水平上向右跑了100px，在竖直上向下跑了10px； rotate()
就是可以让元素顺时针旋转到指定的角度，可以有负值，负值就逆时针旋转；例如transform: rotate(30deg)就是顺着时针转了30度； scale()
类似一个缩放，元素尺寸会增加或者减少，根据给定的宽度(X轴)和高度(Y轴)参数来变； skew()
元素去翻转给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数； matrix
:(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):
box {
width: 100px;
height: 100px;
border: 1px solid tomato;
transform: translate(50px, 20px) rotate(45deg) scale(1.2, 2.1) skew(45deg);
}
7.过渡效果
box {
width: 50px;
height: 50px;
background-color: tomato;
transition: all .8s;
}
box:hover {
background-color: orange;
}
transition的属性
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
可以合并成这个
div {
transition: width 2s linear 1s;
}
8.文字效果 text-shadow
，我用的很少，就是给字体加上阴影，和前面的box-shadow
很类似； word-wrap
倒是用过几次，允许长单词或 URL 地址换行到下一行，就是控制一旦文字内容(主要是英文)顶到父容器边界，如何去换行，是选择只在允许的断字点换行还是在长单词或 URL 地址内部进行换行 9.动画。
/* The animation code */
@keyframes example {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
animation
相关属性
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear; //或者ease,ease-in，ease-out，ease-in-out
animation-delay: 2s;
animation-iteration-count: infinite;//或者count
animation-direction: alternate; //或者reverse
}
可以合并成写成下面这样
div {
animation: example 5s linear 2s infinite alternate;
}
