1.邊框圓角,邊框陰影

border-radius:6px; // border-radius:50%; //圓形 box-shadow: 1px 1px 1px #666; //box-shadow: h-shadow v-shadow blur spread color inset(outset);

2.背景圖片的大小

background-size: 100% 100%; //對(duì)背景圖片進(jìn)行拉伸，使其完成填充內(nèi)容區(qū)域 // background-size:50px 100px; //對(duì)背景圖片進(jìn)行拉伸，使其完成填充內(nèi)容區(qū)域

3.文本效果

text-shadow: 5px 5px 5px #FF0000; //規(guī)定文字水平陰影、垂直陰影、模糊距離，以及陰影的顏色 word-wrap:break-word; //允許長單詞換行到下一行 text-overflow:ellipsis; //顯示省略符號(hào)來代表被修剪的文本 配合white-space:nowrap; overflow:hidden;使用

4.字體@font-face用的少，畢竟引入字體文件都是比較大的，得不償失。（非必要情況勿用）

5.元素2D---移動(dòng)、旋轉(zhuǎn)、放大/縮小、翻轉(zhuǎn)；3D---X軸旋轉(zhuǎn)、Y軸旋轉(zhuǎn)

transform: translate(50px,100px); //從其當(dāng)前位置移動(dòng) left top transform: rotate(30deg); //順時(shí)針旋轉(zhuǎn)給定的角度(允許負(fù)值--逆時(shí)針旋轉(zhuǎn))。 transform: scale(2,4); //尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù) transform: skew(30deg,20deg); //翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù) transform:matrix(0.866,0.5,-0.5,0.866,0,0); //把所有 2D 轉(zhuǎn)換方法組合在一起 transform: rotateX(120deg); //圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn) transform: rotateY(130deg); //圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn) -ms-transform: ; /* IE 9 */ -webkit-transform: ; /* Safari and Chrome */ -o-transform: ; /* Opera */ -moz-transform: ; /* Firefox */

6.過渡效果transition

div{width:100px;height:100px;background:yellow;transition:width 2s linear 2s, height 2s linear 2s,transform 2s linear 2s; //一般配合hover使用-moz-transition:width 2s linear 2s, height 2s linear 2s, -moz-transform 2s linear 2s; /* Firefox 4 */-webkit-transition:width 2s linear 2s, height 2s linear 2s, -webkit-transform 2s linear 2s; /* Safari and Chrome */-o-transition:width 2s linear 2s, height 2s linear 2s, -o-transform 2s linear 2s; /* Opera */ }div:hover{width:200px;height:200px;transform:rotate(180deg);-moz-transform:rotate(180deg); /* Firefox 4 */-webkit-transform:rotate(180deg); /* Safari and Chrome */-o-transform:rotate(180deg); /* Opera */ }

7.動(dòng)畫@keyframes、animation--例子（輸入框自定義光標(biāo)動(dòng)畫）

.custom-cursor {width: 2px;height: 45px;background-color: #2F323A;position: absolute;top: 32px;right: 20px;animation: cursor 1s linear infinite;-webkit-animation: cursor 1s linear infinite;-moz-animation: cursor 1s linear infinite;-o-animation: cursor 1s linear infinite; } @keyframes cursor {0% {opacity: 0}50% {opacity: 0}50.1% {opacity: 1}100% {opacity: 1} } @-webkit-keyframes cursor {0% {opacity: 0}50% {opacity: 0}50.1% {opacity: 1}100% {opacity: 1} } @-moz-keyframes cursor {0% {opacity: 0}50% {opacity: 0}50.1% {opacity: 1}100% {opacity: 1} } @-o-keyframes cursor {0% {opacity: 0}50% {opacity: 0}50.1% {opacity: 1}100% {opacity: 1} }

8.box-sizing:border-box--------border和padding計(jì)算入width之內(nèi)，其實(shí)就是怪異模式了,

設(shè)置了border-box后，兩個(gè)width=50%并排顯示加邊框的時(shí)候不會(huì)錯(cuò)位，

多用于排版問題，很多情況下很實(shí)用，簡化了計(jì)算位置的問題

box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */<br>width:50%;<br>border:1em solid red;<br><em id="__mceDel">float: left;</em>

?

轉(zhuǎn)載于:https://www.cnblogs.com/duanyue/p/7510769.html

總結(jié)

以上是生活随笔為你收集整理的CSS3小知识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。