Css常用的操作有哪些

本篇內(nèi)容主要講解“Css常用的操作有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Css常用的操作有哪些”吧!

常見的css樣式操作

單行文本溢出掩藏

語法：white-space: nowrap| pre | pre-wrap | pre-line | inherit

nowrap：?jiǎn)涡形谋静粨Q行，文本顯示一行；

pre: 保留空白(在游覽器顯示時(shí)，保留空格)；

pre-wrap: 保留空白序列，正常換行；

pre-line: 合并空白符序列，但是保留換行符;

inherit: 繼承父級(jí)元素white-space 屬性的值；

語法：text-overflow：clip | ellipsis | string

clip: 裁剪文本；

ellipsis：省略號(hào)的形式替代被裁剪的文本；

string: 使用制定的字符來替代被裁剪的字符(且支持火狐瀏覽器)；

div {    white-space: 'nowrap';     overflow: hidden;     text-overflow: ellipsis;}

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

多行文本溢出掩藏

語法：display: -webkit-box ，將對(duì)象作為彈性伸縮盒子模型顯示；

語法：-webkit-line-clamp：number

-webkit-line-clamp：限制一個(gè)塊元素顯示文本的行數(shù)(number)

語法：-webkit-box-orient：horizontal | vertical | inline-axis | block-axis

設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式：

horizontal： 盒子水平布局其內(nèi)容；

vertical：盒子垂直布局其內(nèi)容；

inline-axis：盒子沿內(nèi)聯(lián)軸展示其子元素；

block-axis：盒子沿塊軸展示其子元素；

div {    overflow: hidden;      text-overflow: ellipsis;      display: -webkit-box;      -webkit-line-clamp: 2;      -webkit-box-orient: vertical;}

實(shí)現(xiàn)三角形的效果(向上)

transparent：表示設(shè)置為透明

.triangle {      width: 0;      height: 0;      border-right: 20px solid transparent;      border-left: 20px solid transparent;      border-bottom: 20px solid red;  }

css3 實(shí)現(xiàn)垂直居中

語法：display:flex,justify-content:center, align-items: center

display:flex,設(shè)置彈性布局顯示；

justify-content: center, 設(shè)置子元素水平居中；

align-items: center, 設(shè)置子元素垂直居中；

div {    display: flex;      justify-content: center;      align-items: center;}

css3 實(shí)現(xiàn)陰影效果

語法：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平陰影位置(必選)，允許負(fù)值；

v-shadow： 垂直陰影的位置(必選)，允許負(fù)值；

blur：模糊距離(選填)；

spread: 陰影大小(選填)；

color:陰影顏色(選填)；

inset: 從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影(選填),默認(rèn)是外陰影；

div {  box-shadow: 2px 2px 2px 2px #f00 inset;}

css3 實(shí)現(xiàn)圓角效果

語法：border-radius: number px; number 為數(shù)字

border-radius可設(shè)置多個(gè)值；

一個(gè)值：表示四個(gè)圓角都相同；

二個(gè)值：第一個(gè)值為右上和左下圓角的值，第二個(gè)值為右下和左上圓角的值；

三個(gè)值：第一個(gè)值為左上圓角的值，第二個(gè)值為右上和左下圓角的值，第三個(gè)值為右下的值；

四個(gè)個(gè)值：第一個(gè)值為左上圓角的值，第二個(gè)值為右上，第三個(gè)值為右下的值，第四個(gè)為左下圓角的值；

div {   border-radius: 30px;    /*border-radius: 10px 30px*/   /*border-radius: 10px 20px 30px*/   /*border-radius: 10px 20px 30px 40px*/}

css3 實(shí)現(xiàn)文本效果

語法：text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平陰影的位置。允許負(fù)值；

v-shadow：必需。垂直陰影的位置。允許負(fù)值；

blur： 可選。模糊的距離；

color：可選。陰影顏色；

div {    text-shadow: 2px 2px 2px #F00;}

css 偽類first-letter

語法： first-letter表示向段落文本第一個(gè)字符添加特殊樣式

div:first-letter{    font-size: 50px;    color:#f00;    ........}

css 偽類first-line

語法： first-line表示向文本的首行添加特殊樣式

div:first-line {    font-size: 50px;    color:#f00;    ........}

css 跨游覽器透明

兼容IE8及以下版本

div{    width: 200px;      height: 200px;      background: #00B7FF;      opacity: 0.5; /*標(biāo)準(zhǔn)游覽器*/      filter: alpha(opacity=50);/*IE低版本 8*/}

css3 圖片裁剪

語法：object-fit: contain | cover | fill | none | scale-down

contain: 縮放內(nèi)容，保持內(nèi)容的寬高比；

cover: 填充整個(gè)內(nèi)容框，保持內(nèi)容寬高比，如果對(duì)象的寬高比與內(nèi)容框不匹配，該對(duì)象將裁剪以適應(yīng)內(nèi)容寬；

fill: 填充整個(gè)內(nèi)容框（默認(rèn)值），不保持原有比例；

none: 保持圖片寬高不變；

scale-down: 當(dāng)圖片實(shí)際寬高小于所設(shè)置的圖片寬高時(shí)，顯示效果與none一致；否則，顯示效果與contain一致；

div img {    width:100%;    height:100%;    object-fit: cover;}

設(shè)置 input placeholder 的顏色

div::-webkit-input-placeholder {color: #999} div:-moz-placeholder { color: #999} div::-moz-placeholder {color: #999} div:-ms-input-placeholder {  color: #999}

模糊濾鏡效果

語法： filter：blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

blur(px): 設(shè)置高斯模糊，使用px為單位；

brightness(%): 設(shè)置圖像明暗，使用%為單位，值越大越亮；

contrast(%): 調(diào)整圖像的對(duì)比度。

drop-shadow(h-shadow v-shadow blur spread color): 給圖像設(shè)置一個(gè)陰影效果，參考box-shadow；

grayscale(%): 將圖像轉(zhuǎn)換為灰度圖像，使用%為單位；

hue-rotate(deg): 給圖像應(yīng)用色相旋轉(zhuǎn)，使用deg為單位；

invert(%): 設(shè)置反轉(zhuǎn)輸入圖像，值為0-100%；

opacity(0.5): 設(shè)置透明程度,值為0-1；

saturate(%): 設(shè)置圖像飽和度；

sepia(%): 將圖像轉(zhuǎn)換為深褐色，值為0-100%；

url(): URL函數(shù)接受一個(gè)XML文件，該文件設(shè)置了 一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)來指定一個(gè)具體的濾鏡元素

div{    filter: blur(1px);}

到此，相信大家對(duì)“Css常用的操作有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！