建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容主要講解“Css常用的操作有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Css常用的操作有哪些”吧!
為當涂等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及當涂網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為做網(wǎng)站、成都做網(wǎng)站、當涂網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
常見的css樣式操作
單行文本溢出掩藏
語法：white-space: nowrap| pre | pre-wrap | pre-line | inherit
nowrap：單行文本不換行，文本顯示一行；
pre: 保留空白(在游覽器顯示時，保留空格)；
pre-wrap: 保留空白序列，正常換行；
pre-line: 合并空白符序列，但是保留換行符;
inherit: 繼承父級元素white-space 屬性的值；
語法：text-overflow：clip | ellipsis | string
clip: 裁剪文本；
ellipsis：省略號的形式替代被裁剪的文本；
string: 使用制定的字符來替代被裁剪的字符(且支持火狐瀏覽器)；
div { white-space: 'nowrap'; overflow: hidden; text-overflow: ellipsis;}
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我并在后臺私信我：前端，即可免費獲取。
多行文本溢出掩藏
語法：display: -webkit-box ，將對象作為彈性伸縮盒子模型顯示；
語法：-webkit-line-clamp：number
-webkit-line-clamp：限制一個塊元素顯示文本的行數(shù)(number)
語法：-webkit-box-orient：horizontal | vertical | inline-axis | block-axis
設置或檢索伸縮盒對象的子元素的排列方式：
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;}
實現(xiàn)三角形的效果(向上)
transparent：表示設置為透明
.triangle { width: 0; height: 0; border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 20px solid red; }
css3 實現(xiàn)垂直居中
語法：display:flex,justify-content:center, align-items: center
display:flex,設置彈性布局顯示；
justify-content: center, 設置子元素水平居中；
align-items: center, 設置子元素垂直居中；
div { display: flex; justify-content: center; align-items: center;}
css3 實現(xiàn)陰影效果
語法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平陰影位置(必選)，允許負值；
v-shadow： 垂直陰影的位置(必選)，允許負值；
blur：模糊距離(選填)；
spread: 陰影大小(選填)；
color:陰影顏色(選填)；
inset: 從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影(選填),默認是外陰影；
div { box-shadow: 2px 2px 2px 2px #f00 inset;}
css3 實現(xiàn)圓角效果
語法：border-radius: number px; number 為數(shù)字
border-radius可設置多個值；
一個值：表示四個圓角都相同；
二個值：第一個值為右上和左下圓角的值，第二個值為右下和左上圓角的值；
三個值：第一個值為左上圓角的值，第二個值為右上和左下圓角的值，第三個值為右下的值；
四個個值：第一個值為左上圓角的值，第二個值為右上，第三個值為右下的值，第四個為左下圓角的值；
div { border-radius: 30px; /*border-radius: 10px 30px*/ /*border-radius: 10px 20px 30px*/ /*border-radius: 10px 20px 30px 40px*/}
css3 實現(xiàn)文本效果
語法：text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平陰影的位置。允許負值；
v-shadow：必需。垂直陰影的位置。允許負值；
blur： 可選。模糊的距離；
color：可選。陰影顏色；
div { text-shadow: 2px 2px 2px #F00;}
css 偽類first-letter
語法： first-letter表示向段落文本第一個字符添加特殊樣式
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; /*標準游覽器*/ filter: alpha(opacity=50);/*IE低版本 8*/}
css3 圖片裁剪
語法：object-fit: contain | cover | fill | none | scale-down
contain: 縮放內(nèi)容，保持內(nèi)容的寬高比；
cover: 填充整個內(nèi)容框，保持內(nèi)容寬高比，如果對象的寬高比與內(nèi)容框不匹配，該對象將裁剪以適應內(nèi)容寬；
fill: 填充整個內(nèi)容框（默認值），不保持原有比例；
none: 保持圖片寬高不變；
scale-down: 當圖片實際寬高小于所設置的圖片寬高時，顯示效果與none一致；否則，顯示效果與contain一致；
div img { width:100%; height:100%; object-fit: cover;}
設置 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): 設置高斯模糊，使用px為單位；
brightness(%): 設置圖像明暗，使用%為單位，值越大越亮；
contrast(%): 調(diào)整圖像的對比度。
drop-shadow(h-shadow v-shadow blur spread color): 給圖像設置一個陰影效果，參考box-shadow；
grayscale(%): 將圖像轉(zhuǎn)換為灰度圖像，使用%為單位；
hue-rotate(deg): 給圖像應用色相旋轉(zhuǎn)，使用deg為單位；
invert(%): 設置反轉(zhuǎn)輸入圖像，值為0-100%；
opacity(0.5): 設置透明程度,值為0-1；
saturate(%): 設置圖像飽和度；
sepia(%): 將圖像轉(zhuǎn)換為深褐色，值為0-100%；
url(): URL函數(shù)接受一個XML文件，該文件設置了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素
div{ filter: blur(1px);}
到此，相信大家對“Css常用的操作有哪些”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！
新聞名稱：Css常用的操作有哪些
文章路徑：http://www.ef60e0e.cn/article/jchihc.html
