颜色
1、有2种颜色模式RGBA和HSLA
2、HSLA 的四个字母分别代表色调（Hue）、饱和度（Saturation）、亮度（Light）、透明通道（Alpha）。
3、RGBA的浏览器支持情况更好
边框
- border-radius
- box-shadow: 10px 10px 5px #888888; //右、下、半径、色
- border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older /
-o-border-image:url(border.png) 30 30 round; / Opera */
背景
- background-image: url(img_flwr.gif), url(paper.gif); //可以设置多张背景图
- background: url(img_flwr.gif) left bottom no-repeat, url(paper.gif) left top repeat; //为多张图片分别设置各自的属性
- background-size:100% 100%; background-size:80px 60px; //百分比相对于父元素
background-origin:content-box, padding-box, border-box; //背景相对于那个开始展示 - background-clip :padding-box;//背景从padding处展示，content-box//背景从内容区开始展示
- background-attachment:scroll/fixed; //背景随/不随页面进行滚动（不属于CSS3）
-属性复合写法：background：#fff url('../assets/images/bgc_book.png') no-repeat right top/359px 257px, //背景颜色、图片、是否重复、position/宽高，下一个图片的复合属性... -
渐变 ,background-image表示
线性渐变：background-image: linear-gradient(blue,red); //从上到下
background-image: linear-gradient(to right, red , yellow); //从左到右
background-image: linear-gradient(to bottom right, red, yellow);//左上到右下
角度示意：
background-image: linear-gradient(-90deg, red, yellow);//右到左
微信截图_20211218103015.png
文本效果
- text-shadow: 5px 5px 5px #FF0000; //文本阴影
- box-shadow: 10px 10px 5px #888888;
- -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); - text-overflow: clip/ellipsis;//文本溢出时剪裁/...
配合使用：white-space:nowrap;
width:12em;
overflow:hidden; - word-wrap:break-word; //允许对长的不可分割的单词进行分割并换行到下一行
- word-break: keep-all/break-all; //规定非中日韩文本的换行规则。
字体
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
常用变换
- translate()
- rotate()
- scale(x,y) //宽是原来的x倍，高是原来的y倍
-ms-transform: scale(2,3); /* IE 9 /
-webkit-transform: scale(2,3); / Safari /
transform: scale(2,3); / 标准语法 */
过渡
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
动画
@keyframes myfirst
{
from {background: red;} //0%
to {background: yellow;} //100%
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
盒大小：box-sizing 属性
box-sizing: border-box; // width 和 height 中包含 padding(内边距) 和 border(边框)
弹性布局
- justify-content: flex-start | flex-end | center | space-between | space-around
- align-items: flex-start | flex-end | center | baseline | stretch
- flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
