Css常用特效屬性

2021-10-23 06:10:35 字數 2747 閱讀 1114

/* flex 布局 */

display: flex;

/* 實現垂直居中 */

align-items: center;

/*實現水平居中*/

justify-content: center;

/* 溢位文字開啟省略號顯示 */

white-space

: nowrap;

/*關閉自動換行*/

text-overflow

: ellipsis;

/*文字溢位內容處理為省略號*/

overflow

: hidden;

/* 通過設定overflow 開啟bfc */

/*從左向右漸變*/

background-image: linear-gradient(to right, red , yellow);

::placeholder
height: 100px;

line-height: 100px;//保證和height相同高度即可

transition: 0.5s;//動畫過渡時間0.5s
position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

border-radius: 20px;//圓角邊框

border:10px solid rgba(255,255,255,.2);/*10px 實線 顏色為白色,透明度0.2的邊框 */

box-shadow: 10px 10px 15px rgba(0,0,0,.5);/*給元素新增 水平位置10px 垂直位置10px 陰影大小15px 透明度0.5的黑色陰影 */

background-size: cover;/*背景大小為正好填滿標記*/

/* 背景不平鋪 */

background-repeat: no-repeat;

/* 背景響應式調整顯示比例 */

/* 背景不平鋪 */

background-repeat: no-repeat;

/* 背景固定,附著 */

background-attachment: fixed

/* 彈性布局 */

display: flex;

box-sizing: border-box;//併排放置帶邊框元素時,自動進行匹配

/* 溢位隱藏 */

overflow: hidden

outline: none;/*outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。*/
transform: translatex(-50%) scalex(2);//水平方向平移-50%,水平縮放2倍
filter: blur(0.2px);//高斯模糊0.2px
resize: none;
cursor: pointer;//將滑鼠變成手

//設定為auto自動,將在超過指定高度是新增滾動條

/* 滾動條 */

::-webkit-scrollbar

::-webkit-scrollbar-track

::-webkit-scrollbar-thumb

::-webkit-scrollbar-button

::-webkit-scrollbar-corner

overflow-y: auto;//垂直方向自適應

word-wrap:break-word;//文字自動換行

justify-content: center;
min-height: 100px;//最小高度為100px
display: block;//轉為塊級

display: inline;//轉為內聯,行

display: inline-block;//塊and行

/* 移除預設樣式 */
pointer-events

: none;

-moz-user-select

: none;

/*火狐*/

-webkit-user-select

: none;

/*webkit瀏覽器*/

-ms-user-select

: none;

/*ie10*/

-khtml-user-select

: none;

/*早期瀏覽器*/

user-select

: none;

css 常用屬性

字型屬性 font 大小font size x large 特大 xx all 極小 一般中文用不到,只要用數值就可以,單位 px pd 樣式font style oblique 偏斜體 italic 斜體 normal 正常 行高line height normal 正常 單位 px pd em粗...

CSS常用屬性

css常用屬性 1.color,background color 表示顏色的關鍵字,16進製制數 中提供的color scheme工具 2.font family 該屬性的值可以是一組字型,按喜歡程度排序的字型列表。一些中文字型的列表 windows的一些 新細明體 pmingliu 細明體 min...

css常用屬性

文字屬性 font size font family 字型型別 文字屬性 color text decoration 下劃線 none underline text align 對齊方式 left center right 背景屬性 background color background image...