本篇內(nèi)容主要講解“Css常用的操作有哪些”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Css常用的操作有哪些”吧!
為當(dāng)涂等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及當(dāng)涂網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、成都做網(wǎng)站、當(dāng)涂網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
常見(jiàn)的css樣式操作
單行文本溢出掩藏
語(yǔ)法:white-space: nowrap| pre | pre-wrap | pre-line | inherit
nowrap:?jiǎn)涡形谋静粨Q行,文本顯示一行;
pre: 保留空白(在游覽器顯示時(shí),保留空格);
pre-wrap: 保留空白序列,正常換行;
pre-line: 合并空白符序列,但是保留換行符;
inherit: 繼承父級(jí)元素white-space 屬性的值;
語(yǔ)法:text-overflow:clip | ellipsis | string
clip: 裁剪文本;
ellipsis:省略號(hào)的形式替代被裁剪的文本;
string: 使用制定的字符來(lái)替代被裁剪的字符(且支持火狐瀏覽器);
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)獲取。
多行文本溢出掩藏
語(yǔ)法:display: -webkit-box ,將對(duì)象作為彈性伸縮盒子模型顯示;
語(yǔ)法:-webkit-line-clamp:number
-webkit-line-clamp:限制一個(gè)塊元素顯示文本的行數(shù)(number)
語(yǔ)法:-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)垂直居中
語(yǔ)法: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)陰影效果
語(yǔ)法: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)圓角效果
語(yǔ)法: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)文本效果
語(yǔ)法: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
語(yǔ)法: first-letter表示向段落文本第一個(gè)字符添加特殊樣式
div:first-letter{ font-size: 50px; color:#f00; ........}
css 偽類first-line
語(yǔ)法: 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 圖片裁剪
語(yǔ)法: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}
模糊濾鏡效果
語(yǔ)法: 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)來(lái)指定一個(gè)具體的濾鏡元素
div{ filter: blur(1px);}
到此,相信大家對(duì)“Css常用的操作有哪些”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
網(wǎng)頁(yè)題目:Css常用的操作有哪些
URL分享:http://muchs.cn/article42/jchihc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、域名注冊(cè)、網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站、關(guān)鍵詞優(yōu)化、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)