顏色
1饿这、有2種顏色模式RGBA和HSLA
2浊伙、HSLA 的四個字母分別代表色調(diào)（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); //可以設(shè)置多張背景圖
- background: url(img_flwr.gif) left bottom no-repeat, url(paper.gif) left top repeat; //為多張圖片分別設(shè)置各自的屬性
- background-size:100% 100%; background-size:80px 60px; //百分比相對于父元素
background-origin:content-box, padding-box, border-box; //背景相對于那個開始展示 - background-clip :padding-box;//背景從padding處展示卧蜓，content-box//背景從內(nèi)容區(qū)開始展示
- background-attachment:scroll/fixed; //背景隨/不隨頁面進(jìn)行滾動（不屬于CSS3）
-屬性復(fù)合寫法：background：#fff url('../assets/images/bgc_book.png') no-repeat right top/359px 257px, //背景顏色、圖片声功、是否重復(fù)烦却、position/寬高，下一個圖片的復(fù)合屬性... -
漸變 ,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; //允許對長的不可分割的單詞進(jìn)行分割并換行到下一行
- word-break: keep-all/break-all; //規(guī)定非中日韓文本的換行規(guī)則先巴。
字體
@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); / 標(biāo)準(zhǔn)語法 */
過渡
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(內(nèi)邊距) 和 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;
