這些都是新內容，覺得好陌生，要多練才行

1、background-origin 背景原點，必需保證背景是background-repeat為no-repeat。

如：html：<div class=”img”></div>

css:? .img{width=”300px”;

height=”250”;

padding=”50px”;

background:url(...)no-repeat;

border:50px dashed #ccc;

background-origion:content-box;

background-position:center center;

}

?

2、background-clip 背景的顯示區域

如：html：<div class=”img”></div>

Css:將上面background-origin;替換成background-clip:padding-box;即可。

?

3、background-size背景尺寸>

如：html:<div class=”d1”></div>

Css:? .d1{background:url(...) no-repeat;

background-size:80px 60px;

}

?

4、background：背景色 背景圖片 背景平鋪方式 背景定位

如body{background:#EDEDED url(...) no-repeat 50% 30px;}

?

5、多重背景

如：html:<div class=”img”></div>

css:? .img{width:720px;

height:461px;

background:url(...) no-repeat center center/30% 30%,url(...);

}

?

6、list-style-type 項目符號

如： ul{list-style-type:*}

*可以是實心圓disc、空心圓circle、實心方塊、不顯示none、阿拉伯數字decimal、小寫羅馬數字lower-roman、大寫羅馬數字upper-roman。

?

7.list-style-image 自定義項目符號

如：ul{list-style-image:url(...)}

?

8、transform 變形樣式

如：html：<div class="circle-box"></div>

CSS：

2D平移translate()：

.circle-box {

??????????????? width: 100p x;

??????????????? height: 100px;

??????????????? border-radius: 10px;

??????????????? background-color: #808080;

??????????????? /* 移動x,y */

??????????????? /*transform: translate(100%, 100%);*/

??????????????? /* 移動x */

??????????????? /*transform: translateX(200%);*/

??????????????? /* 移動Y */

??????????????? transform: translateY(200%);

??????????? }

?

2D旋轉 rotate():

???????? ??????????? .circle-box {

??????????????? width: 100px;

??????????????? height: 100px;

??????????????? border-radius: 10px;

??????????????? background-color: #808080;

??????????????? transform-origin: 0 0;

??????????????? transform: rotate(15deg);

??????????? }

?

2D縮放 scale():

.circle-box {

??????????????? width: 100px;

??????????????? height: 100px;

??????????????? background: #000000;

??????????????? transition: all .3s ease-in;

??????????? }

??????????? .circle-box:hover {

??????????????? transform: scale(1.1, 1.1);

??????????? }

?

斜切扭曲 skew():

??????????? .circle-box {

??????????????? width: 100px;

??????????????? height: 100px;

??????????????? background: #000000;

??????????????? transition: all .3s ease-in;

??????????? }

??????????? .circle-box:hover {

??????????????? transform: skew(10deg, 10deg);

??????????? }

3D位移translate3d():

.circle-box{

???????? width: 80px;

???????? height: 46px;

???????? background-color: #e4ff00;

???????? position:absolute;left: 473px;top:232px;

???????? transition:all .3s ease-in;

}

.circle-box:hover{

???????? transform:translate3d(67px,89px,156px);

}

9、過渡動畫transition：

如：html：<div class="circle-box"></div>

CSS：??????????

?.circle-box {

??????????????? width: 100px;

??????????????? height: 100px;

??????????????? background: #000000;

???????? ???????/*transition-property: width,height;

??????????????? transition-duration: .3s;

??????????????? transition-timing-function: ease-in;

??????????????? transition-delay: 1s;*/

??????????????? transition: all .3s ease-in 1s;

??????????? }

???????????

? ??????????.circle-box:hover {

??????????????? width: 200px;

??????????????? height: 200px;

??????????? }

轉載于:https://www.cnblogs.com/han201388/p/5772516.html

總結

以上是生活随笔為你收集整理的CSS之第五天绽放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。