css3新增屬性
box-shadow
box-shadow: 10px 10px 10px rgba(54,54,54,0.36);
元素陰影，這個不會影響頁面布局；分別指定如下參數(shù)：
- 水平偏移量，正數(shù)向右，負數(shù)向左
- 垂直偏移量，正數(shù)向下，負數(shù)向上
- 陰影模糊效果，數(shù)值越大越模糊
- 顏色
border-radius
border-radius: 2px;
邊框圓角半徑，會影響box-shadow顯示
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
設(shè)置橢圓
border-radius: 30px/10px;
position: sticky;
粘滯定位，和相對定位類型，不同的是粘滯定位可以在元素到達某個位置時將其固定住，兼容性不好；
通過設(shè)置top、bottom、left、right設(shè)置固定范圍，當這些值設(shè)置為0px時，就是整個視口
漸變背景
漸變是圖片，需要通過background-image進行設(shè)置；
線性漸變
漸變默認是從上到下；
-
linear-gradient(red, yellow)從上到下，紅色到黃色的漸變 -
linear-gradient(to right, red, yellow)to right指定漸變方向，這個指定方向還可以設(shè)置deg（度），turn(圈) - 漸變可以同時指定多個顏色，多個顏色默認情況下平均分布，即指定的顏色之間的距離是相等的
也可以手動指定分布情況：background-image: linear-gradient(red 20px, yellow 80px);，指定漸變分界顏色出現(xiàn)的位置
可重復的漸變背景
background-image: repeating-linear-gradient(red 0px, yellow 40px);
徑向漸變
-
radial-gradient(red, yellow)red中心向四周輻射yellow
整體和線性漸變一樣；默認情況下徑向漸變的形狀根據(jù)元素形狀來計算，即：
-
元素為正方形，徑向漸變就是圓形
-
元素為長方形，徑向漸變就是橢圓
-
可以手動指定徑向漸變范圍的大小
radial-gradient(100px 200px, red, yellow)
這個指定大小存在預(yù)設(shè)值- closest-side 到達最近的邊
- closest-corner 到達最近的角
- farthest-side 到達最遠的邊
- farthest-corner 到達最遠的角
-
可以手動指定元素的徑向漸變形狀：
radial-gradient(circle, red, yellow)或者radial-gradient(ellipse, red, yellow) -
可以手動執(zhí)行元素徑向漸變的中心點位置
radial-gradient(100px 200px at 0px 0px, red, yellow)
可重復的漸變背景
background-image: repeating-radial-gradient(red 0px, yellow 40px);
過渡
過渡，只有在屬性、樣式發(fā)生變化的時候才會執(zhí)行，如hover狀態(tài)；transition: 對象 時間，通過過渡指定一個屬性切換到目標狀態(tài)以過渡的方式，主要有兩個，一個是目標狀態(tài)，一個當前狀態(tài)，一個是過渡時間；
-
transition: all 2s所有屬性再2s內(nèi)進行過渡 -
transition: width 0.5s, height 1s;同時指定多個使用逗號隔開
分屬性
簡寫屬性無順序要求，只是路過同時使用duration和delay，那么第一個是duration，第二個是delay
-
transition-property 指定要執(zhí)行過渡的屬性，多個屬性使用逗號隔開，如果要針對所有屬性，那就設(shè)置為all
transition-property: width, height;transition-property: all;
-
transition-duration 執(zhí)行執(zhí)行過渡的持續(xù)時間，針對
transition-property不同屬性設(shè)置的transition-duration也使用逗號隔開，然后會對應(yīng)上去，如：transition-property: width, height; transition-duration: 1s, 2s; -
transition-timing-function 執(zhí)行過渡的時間分布效果，注意，要看到效果一定要先指定
transition-during；- ease 默認效果，慢速開始，先加速再減速
- linear 勻速運動
- ease-in 加速運動
- ease-out 減速運動
- ease-in-out 先加速后減速
- cubic-bezier() 通過指定函數(shù)，通過網(wǎng)站
https://cubic-bezier.com/#.17,.67,.83,.67可以得到這個曲線 - steps() 指定過渡效果分幾步進行過渡，可設(shè)置一個、兩個值
- 一個值就是指定分幾步
- 兩個值就是制定分幾步，每次在一步的什么時候執(zhí)行過渡
-
transition-delay 指定進行過渡的延時
動畫
設(shè)置動畫效果，必須先要設(shè)置一個關(guān)鍵幀，動畫效果執(zhí)行完畢就正常顯示元素。
簡寫屬性無順序要求，只是路過同時使用duration和delay，那么第一個是duration，第二個是delay
- animation-name 指定動畫的關(guān)鍵幀
- animation-duration 指定整個動畫持續(xù)時間
- animation-delay 指定動畫延時時間
- animation-timing-function 指定動畫播放時間函數(shù)，這個函數(shù)指的是關(guān)鍵幀之間的函數(shù)；
- step() 指定的是關(guān)鍵幀之間的跳轉(zhuǎn)次數(shù)
- animation-iteration-count 動畫執(zhí)行次數(shù)，默認一次
- infinite 無限次
- animation-direction 方向
- normal from -> to
- reverse to -> from
- alternate 交替 from -> to -> from …
- alternate-reverse 反向交替 to -> from -> to …
- animation-play-state 控制動畫停止和播放
- running 播放
- paused 停止
- animation-fill-mode 動畫執(zhí)行的填充效果
- none 默認，動畫執(zhí)行完畢元素回到元素屬性定義的位置
- forward 動畫執(zhí)行完畢元素停止到動畫結(jié)束的位置
- backward 動畫延遲等待時，元素會處于動畫開始狀態(tài)，結(jié)束位置會回到none位置
- both == backward + forward
關(guān)鍵幀
@keyframes
關(guān)鍵幀設(shè)置了動畫執(zhí)行的每一個步驟；
與transition的關(guān)系
transition – 過渡，與transition類型，但是transition需要當元素屬性發(fā)生變化才會發(fā)生；而動畫可以自動觸發(fā)動態(tài)效果；
demo
.parent-30 {
width: 100px;
height: 100px;
background-color: silver;
/* 設(shè)置動畫 */
animation-name: keyframe-1;
animation-duration: 2s;
animation-delay: 1s;
animation-timing-function: ease-in-out;
}
@keyframes keyframe-1 {
/* to表示動畫的開始位置，也可以使用 0% 表示 */
from {
width: 100px;
height: 100px;
}
/* from表示動畫的結(jié)束位置，也可以使用 100% 表示 */
to {
width: 200px;
height: 200px;
}
<div class="parent-30">
</div>
變形
變形是指元素形狀或位置發(fā)生的改變；他不會影響頁面布局；這個就是和margin的區(qū)別，margin會影響到布局。
transform 用來設(shè)置變形效果，變形效果如果想要看到3D效果，就要對變形元素的父元素設(shè)置persprctive屬性
平移
- translateX() 元素沿著X方向平移，平移使的百分比不是相對父元素，而是相對自身
- translateY() 元素沿著Y方向平移，平移使的百分比不是相對父元素，而是相對自身
可以利用上面兩個實現(xiàn)可適應(yīng)內(nèi)容大小的塊盒居中 - translateZ() 元素沿著Z方向平移
Z軸平移，正常情況下就是調(diào)整元素和人眼之間的距離，距離越大，元素離人越近
Z軸平移屬于立體效果(近大遠小)，默認情況下網(wǎng)頁不支持，如果需要看見效果，必須要設(shè)置視距perspective：transform: perspective(800px) translateZ(200px);；設(shè)置視距之后Z軸平移才有效果；
平移Z軸，他是將整個屏幕向用戶方向移動，就像場景視圖概念，此時場景向用戶移動，視圖顯示的范圍必定會縮小，于是顯示范圍會縮減，計算機的視圖一直是場景中心，因此會出現(xiàn)四周元素消失的情況。
使用
transform: translateX(-50%) translateY(-50%);這個是按照順序進行變形的。
旋轉(zhuǎn)
旋轉(zhuǎn)的時候立體坐標系的原點在元素的中心位置，橫穿原點的是x軸，縱穿原點的是y軸，垂直顯示器平面的是Z軸，站在軸的正方向，順時針旋轉(zhuǎn)時，旋轉(zhuǎn)角度為正數(shù)；逆時針為負數(shù)。
通過旋轉(zhuǎn)可以使元素沿著x、y、z旋轉(zhuǎn)指定的角度
- rotateZ 沿著Z旋轉(zhuǎn)，旋轉(zhuǎn)的點為元素中心
- rotateX 驗證X旋轉(zhuǎn)，旋轉(zhuǎn)的軸為X軸，是元素橫向的、元素縱向中點的那條線，父元素設(shè)置
perspective有立體效果 - rotateY 沿著Y旋轉(zhuǎn)，旋轉(zhuǎn)的是Y軸，橫向左邊為元素中點，父元素設(shè)置
perspective有立體效果
旋轉(zhuǎn)到背面元素上的數(shù)據(jù)依舊是可見的，只不過是倒過去了。
使用
transform: rotateZ(45deg);
其他
backface-visibility
- visible 默認顯示
- hidden 這個不顯示是直接背景也都不顯示的
使用
transform: rotateY(45deg) translateZ(100px);，這個是按照順序進行變形的，先旋轉(zhuǎn)Y軸，然后Z軸也會跟著旋轉(zhuǎn)，因此平移Z軸時移動的方向并不是正對著人，而是會有一個偏移。
立體效果
perspective和transform-style均設(shè)置在父元素中
perspective
perspective 指定了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。z>0 的三維元素比正常大，而 z<0 時則比正常小，大小程度由該屬性的值決定。
三維元素在觀察者后面的部分不會繪制出來，即 z 軸坐標值大于 perspective 屬性值的部分。
當該屬性值不為 0 和 none 時，會創(chuàng)建新的 層疊上下文。在這種情況下，容器內(nèi)元素的層疊關(guān)系像是使用了 position: fixed 一樣。
元素位于3D空間還是平面中
transform-style
- flat 默認值，設(shè)置元素的子元素位于該元素的平面中，一般的移動(主要是Z軸移動），他是沒有效果的，即使有效果，那也是計算機計算出來的，僅顯示x、y平面上可以看到的；設(shè)置為
preserve-3d，那么在顯示時會顯示Z軸方向上的信息。 - preserve-3d 指示元素的子元素應(yīng)位于 3D 空間中。
縮放
縮放的本質(zhì)是對軸進行拉伸，他是一種對像素的增益，而不是直接修改了像素，也就是說顯示像素=元素像素*增益
-
transform: scaleX(2)水平方向縮放 -
transform: scaleY(3)垂直方向縮放 -
transform: scale(3)雙方向上的縮放 -
transform: scaleZ(3)
如果transform-style為默認情況，即flat，那么對于單個元素，此時scaleZ()是看不出效果的，因為這種元素他只是一個平面的概念，他是沒有Z軸的，要看到Z軸的效果，就要將兩個元素(也就是兩個平面）利用position: absolute放置到相同x、y位置，然后旋轉(zhuǎn)Y軸才看的出來兩者的Z軸間隙。
而單純的給人看的時候，兩者的像素一直都是不變的，因此單純在平面是無法觀測到的。
變形的原點
transform-origin，設(shè)定變形原點，所有的縮放均圍繞變形原點進行變形：旋轉(zhuǎn)、縮放均與該屬性相關(guān)。
- center 默認值，在中心位置，偶數(shù)為
n/2,奇數(shù)為n/2 + 1 transform-origin: 0px 0px
變量
兼容性差；
css中有變量的概念，但是兼容性存在問題。
變量的定義、作用域和使用
定義
定義就是在一個元素中使用--key: value;進行定義
作用域
css定義的變量的作用域是當前元素以及當前元素的后代元素
使用
var(--key)文章來源：http://www.zghlxwxcb.cn/news/detail-658876.html
示例
<style>
.parent-1 {
/* 定義變量 */
--color: red;
}
.parent-1 .box-1 {
width: 100px;
height: 100px;
/* 使用變量 */
background-color: var(--color);
}
.parent-1 .box-2 {
width: 100px;
height: 100px;
/* 使用變量 */
color: var(--color);
}
</style>
<div class="parent-1">
<div class="box-1"></div>
<div class="box-2">
123
</div>
</div>
運算
兼容性差
如width: calc(100px / 2);文章來源地址http://www.zghlxwxcb.cn/news/detail-658876.html
到了這里，關(guān)于css3新增屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
