css样式 css样式怎么写

1、文字超出部分显示省略号

单行文本溢出显示省略号(它必须有宽度)

p{宽度:200rpx溢出:隐藏；文本溢出:省略号；空白:nowrap}多行文本溢出显示省略号。

p { display:-WebKit-box；-webkit-box-orient:垂直；-WebKit-line-clamp:3；溢出:隐藏；}2、中英文断词:break-all；仅适用于英语，以字母为基础的自动换行:断字；只在英文中有效，以单词为断行基础:空格:预换行；它只在中文中工作，强制空格换行符:nowrap强制不换行有效。

p { word-wrap:break-word；空白:正常；断字:全断；}//不换行。wrap { white-space:nowrap；}//自动换行{ word-wrap:break-word；断字:正常；}//强制换行。wrap { word-break:break-all；}3、文本阴影text-shadow为网页字体添加阴影，通过设置text-shadow属性来设置相关属性值。属性和值的描述如下:文本-阴影:[x偏移，y偏移，模糊，颜色]；

X-offset:指阴影从字体水平偏移的位置。y偏移:指阴影从字体垂直偏移的位置。模糊:指阴影的模糊值。颜色:指阴影的颜色；

h1 { text-shadow:5px 5px 5px # ff 0000；}4.设置占位符输入的字体样式::-Webkit-input-placeholder {/* chrome/opera/safari */color:red；}输入::-moz-placeholder {/* Firefox 19+*/color:红色；}输入:-ms-input-placeholder {/* IE 10+*/color:红色；}输入:-moz-placeholder {/* Firefox 18-*/color:红色；}5.将高度和宽度不固定的div垂直居中的方法1:伪元素和inline-block/vertical-align(兼容IE8)。

。换行:在{ content:& # 39；'；显示:内嵌-块；身高:100%；垂直对齐:居中；右边距:-0.25 em；//微调空 grid}。box { display:inline-block；垂直对齐:居中；}方法二:flex(不兼容ie8或以下版本)

。box-wrap {高度:300pxjustify-content:居中；对齐-项目:居中；显示器:flex背景色:# 666；}方法三:转换(不兼容ie8或以下版本)

。盒子包装{宽度:100%；高度:300px背景:rgba(0，0，0，0.7)；位置:相对；} .框{位置:绝对；左:50%；top:50%；transform:translate x(-50%)translate y(-50%)；-WebKit-transform:translate x(-50%)translate y(-50%)；}方法四:设置边距:auto(此方法不是严格意义上的固定，而是父级宽度和高度的50%。)

。换行{ position:relative；宽度:100%；高度:300px背景色:# f00}.框-内容{位置:绝对；top:0；左:0；底部:0；右:0；宽度:50%；身高:50%；边距:自动；背景色:# ff0}6.解决IOS页面滑动的问题。Body，HTML {-Webkit-溢出-滚动:touch7.设置滚动条样式。test::-webkit-scrollbar{ /*整体滚动条样式*/width:10px；/*高度和宽度分别对应水平滚动条和垂直滚动条的尺寸*/height:1px；}.test::-Webkit-scroll bar-thumb {/*滚动条内的小方框*/border-radius:10px；背景色:天蓝色；背景-图像:-WebKit-线性-渐变(45deg，rgba(255，255，255，0.2) 25%，透明25%，透明50%，rgba(255，255，255，0.2) 50%，rgba(255，255，255，0.2) 75%，透明75%，透明)；}.test::-Webkit-scroll bar-Track {/*滚动条内的Track */box-shadow:insert 005 px rgba(0，0，0，0.2)；背景:# ededed边框半径:10px}8.滚动条可以同时隐藏和滚动。演示::-Webkit-scroll bar { display:none；/* Chrome Safari */}。演示{ scrollbar-width:无；/* firefox */ -ms-overflow-style:无；/* IE 10+ */ overflow-x:隐藏；溢出-y:自动；}9.css绘制三角形div { width:0；高度:0；边框宽度:0 40px 40px边框样式:纯色；边框颜色:透明透明红色；}实现带边框的三角形:

& ltdiv id = & # 34蓝色& # 34；& gt& ltdiv & gt#blue { position:相对；宽度:0；高度:0；边框宽度:0 40px 40px边框样式:纯色；边框颜色:透明透明蓝；}#blue:在{ content:& # 34；"；位置:绝对；top:1px；左:-38px；边框宽度:0 38px 38px边框样式:纯色；边框颜色:透明透明黄色；}注意:如果要画直角三角形，将左边界设置为0；

如果你想画一个左右三角形，把右边界设为0就行了(其他情况也一样)。

10、Table表格边框合并

表，tr，TD { border:1px solid # 666；}表{ border-collapse:collapse；}11.css选择第n个标签元素first-child first-child来指示选择列表中的第一个标签。Last-child last-child表示选择列表中的最后一个标签，n-child(3)表示选择列表中的第三个标签，n-child(2n-1)表示选择列表中的偶数标签，n-child(n+3)表示选择列表中的标签从第三个开始到最后一个。第n个子代(-n+3)表示选择列表中的标签范围从0到3，即小于3的标签。Th-last-child (3)表示选择列表中的倒数第三个标签。

如何使用:

李:第一胎{ 12 }。移动软键盘会切换到搜索模式。默认情况下，软键盘上的键是文本，如go或confirm。要将其更改为搜索文本，您需要向输入中添加一个类型语句:

& lt表单操作= & # 34；#"& gt& lt输入类型= & # 34；搜索& # 34；placeholder = & # 34请进入…"name = & # 34搜索& # 34；/& gt；& lt/form & gt；你需要一个form标签，设置action属性，这样输入法右下角写完会自动变成搜索。同时，使用搜索类型后，搜索框默认会有一个删除按钮。

13、onerror 处理图片异常

在使用onerror异常处理时，如果onerror的画面出现问题，画面显示会陷入死循环，所以在分配了异常画面后，将地址设置为空。

<img onerror="this.src='url;this.onerror=null'" />14、背景图片的大小

.bg-img{ background:url(../img/find_pw_on_2.png) no-repeat center center !important; background-size: 27px auto !important; /*background-size: 100% 100%;*/ /*background-size: 50px 100px*/}15、文字之间的间距

单词text-indent抬头距离，letter-spacing字与字间距& ltimg onerror = & # 34this.src = & # 39网址；this . on error = null & # 39；"/& gt；14.背景图片的大小。BG-img {背景:URL(../img/find _ pw _ on _ 2.png)无重复中心！重要；背景尺寸:27px自动！重要；/*背景尺寸:100% 100%；*//*背景尺寸:50px 100px */} 15。单词间距距离单词头部的距离(文本缩进)和字母间距。

p { text-indent:10px；//Word平视距离字母间距:10px//Spacing }16。元素占据了整个屏幕。如果用100%的话，会根据母体的身高来决定，所以用100vh单位。

。dom{宽度:100%；身高:100vh}17、CSS实现文本两端对齐。wrap { text-align:justify；text-justify:distribute-all-lines；//ie6-8 text-align-last:justify；//块或行的最后一行对齐-moz-text-align-last:justify；-WebKit-text-align-last:justify；}18.wrap { width:25px；行高:18px高度:自动；字体大小:12px填充:8px 5px自动换行:断字；/*英语的时候需要加上这句话。wrap {身高:210px行高:30px文本对齐:对齐；书写模式:垂直-lr；//从左到右书写方式:t b-lr；//IE从左到右//书写方式:垂直-rl；-从右到左//书写方式:t b-rl；-从右到左}19。使元素鼠标事件无效。wrap {//如果按tab选择元素，如button，然后按Enter，仍然可以执行相应的事件，如click。指针事件:无；光标:默认；}20.禁止用户选择。wrap {-Webkit-touch-callout:无；-WebKit-用户选择:无；-khtml-user-select:无；-moz-user-select:无；-ms-user-select:无；用户选择:无；}21、在浏览器中使用硬件加速，用css打开硬件加速，让GPU(图形处理器)发挥作用，从而提高性能。硬件加速在移动端特别有用，因为可以有效降低资源的利用率。目前主流浏览器在应用一些CSS规则时会检测到页面中的一个DOM元素会打开，并且会打开最突出的特征元素的3D变换。如果不使用3D变形，我们可以通过以下方式打开它:

。wrap { transform:translate z(0)；}22、页面动画闪烁问题在Chrome和Safari中，当我们使用CSS变换或动画时，可能会出现页面闪烁的效果。以下代码可以修复这种情况:

。cube {-WebKit-back face-visibility:hidden；背面-可见性:隐藏；-WebKit-视角:1000；视角:1000；/*此处其他变换属性*/} WebKit内核的浏览器中另一个有效的方法是

。cube {-WebKit-transform:translate 3d(0，0，0)；transform: translate3d(0，0，0)；/*此处其他变换属性*/} 23、字母大小写转换p {text-transform: uppercase} //将所有字母变为大写字母p {text-transform: lowercase} //将所有字母变为小写字母p { text-transform:capital }//首字母大写p {font-variant: all-caps} //将字体变为小写字母24。将容器设置为透明。wrap {filter:alpha(不透明度= 50)；-moz-不透明度:0.5；-khtml-不透明度:0.5；不透明度:0.5；}25、消除过渡闪屏。wrap {-Webkit-transform-style:preserve-3D；-webkit-backface-visibility:隐藏；-WebKit-视角:1000；}26、识别字符串中的& # 39；\\ n & # 39换行符通常返回带换行符的标签，而不是\\n在富文本中。在没有常规转换的情况下，可以通过以下样式实现换行符。

正文{空白:前置行；}27.移除边框a { outline:none；；//或者大纲:0文本-修饰:无；//取消默认下划线}28。CSS在链接后显示URL < a href = & # 34；//www . webqdkf . com & # 34；& gt班级前端网络

.wrap { height: 100, line-height: 100}img { vertival-align：middle}// vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素// vertical-align：baseline/top/middle/bottom/sub/text-top;33、实现宽高等比例自适应矩形

.scale { width: 100%; padding-bottom: 56.25%; height: 0; position: relative; }.item { position: absolute; width: 100%; height: 100%; background-color: 499e56;} <div class="scale"> <div class="item"> 这里是所有子元素的容器 </div> </div>34、transfrom的rotate属性在span标签下失效

span { display: inline-block}35、CSS加载动画

主要是通过css旋转动画的实现：的垂直对齐属性。wrap {height: 100，line-height:100 } img { vertical-align:middle }//vertical-align CSS用于指定行内元素或表格单元格元素的垂直对齐方式。只对行内元素和表格单元格元素有效，不能用于垂直对齐块级元素//vertical-align:baseline/top/middle/bottom/sub/text-top；33.实现宽高比自适应矩形。比例{宽度:100%；垫底:56.25%；高度:0；位置:相对；}.项{位置:绝对；宽度:100%；身高:100%；背景色:499e56} & ltdiv class = & # 34scale & # 34& gt& ltdiv class = & # 34item & # 34& gt这是所有子元素的容器

。dom{ -webkit-animation:circle 1s无限线性；} @关键帧圆{ 0% { transform:rotate(0 deg)；} 100%{变换:旋转(360度)；}}达到以下效果:

<div class="loader"></div><style>.loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 80px; height: 80px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}</style>36、文字渐变效果实现

<div class="text_signature " >fly63前端网，一个免费学习前端知识的网站</div><style>.text_signature { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #ec2239, #40a4e2,#ea96f5); width: 320px;}</style>37、好看的边框阴影

<div class="text_shadow"></div><style> .text_shadow{ width:500px; height:100px; box-shadow: 0px 0px 13px 1px rgba(51, 51, 51, 0.1);}</style>38、好看的背景渐变

<div class="text_gradient"></div><style> .text_gradient{ width:500px; height:100px; background: linear-gradient(25deg, rgb(79, 107, 208), rgb(98, 141, 185), rgb(102, 175, 161), rgb(92, 210, 133)) rgb(182, 228, 253);}</style>39、实现立体字的效果

<div class="text_solid">有课前端网-web前端技术学习平台</div><style> .text_solid{ font-size: 32px; text-align: center; font-weight: bold; line-height:100px; text-transform:uppercase; position: relative; background-color: #333; color:#fff; text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6);}</style>40、全屏背景图片的实现

.swper{ background-image: url(./img/bg.jpg); width:100%; height:100%;//父级高不为100%请使用100vh zoom: 1; background-color: #fff; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0;}41、实现文字描边的2种方法

方式一：& ltdiv class = & # 34装载机& # 34；& gt& lt/div & gt；& ltstyle & gt。loader { border:16px solid # f3f3f 3；边界半径:50%；border-top:16px solid # 3498 db；宽度:80px高度:80px-WebKit-动画:自旋2s线性无限；动画:自旋2s线性无限；} @-WebKit-关键帧spin { 0% {-WebKit-transform:rotate(0 deg)；} 100% { -webkit-transform:旋转(360 deg)；} } @关键帧spin { 0% { transform:rotate(0 deg)；} 100% {变换:旋转(360度)；} } & lt/style & gt；36、文本渐变效果的实现

。stroke {-WebKit-text-stroke:1px green yellow；文本-笔画:1px greenyellow}模式二:

。笔画{ text-shadow:#000 1px 0，#000 0 1px 0，#000 -1px 0，# 000 0-1px 0；-webkit-text-shadow:#000 1px 0、#000 0 1px 0、#000 -1px 0、# 000 0-1px 0；-moz-text-shadow:#000 1px 0 0，#000 0 1px 0，#000 -1px 0 0，# 000 0-1px 0；*滤镜:发光(颜色=#000，强度= 1)；}42、元素透明性的实现。dom{不透明度:0.4；滤镜:alpha(不透明度= 40)；/* IE8及其早期版本*/}使用rgba()设置颜色透明度。

。demo{背景:rgba(255，0，0，1)；}描述:RGBA代表红色、绿色、蓝色和阿尔法。

43、解决1px边框变粗问题

。DOM { height:1px；后台:# dbdbdb变换:scaleY(0.5)；} Ps:1px变粗的原因出现了。比如屏幕翻倍，1px像素其实对应两个物理像素。

44、CSS不同单位的运算

Css本身也可以进行简单的操作，主要是使用calc函数。实现不同单位的加减运算；

。div { width:calc(100%-50px)；}45，CSS实现文字模糊效果。vague_text{ color:透明；正文-阴影:# 111 0 0 5px}46.通过滤镜使图标变灰。一张彩色的图片可以达到鼠标移入彩色，移出灰色的效果。

<a href='' class='icon'><img src='01.jpg' /></a><style>.icon{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}.icon:hover{ filter: none; -webkit-filter: grayscale(0%);}</style>47、图片自适应object-fit

当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。css3中可使用object-fit属性来解决图片被拉伸或是被缩放的问题。使用的提前条件：图片的父级容器要有宽高。& lta href = & # 39'class = & # 39icon & # 39& gt& ltimg src = & # 3901.jpg & # 39/& gt；& lt/a & gt；& ltstyle & gt。icon{ -webkit-filter:灰度(100%)；-moz-滤镜:灰度(100%)；-ms-filter:灰度(100%)；-o-滤镜:灰度(100%)；滤镜:灰度(100%)；滤镜:灰色；}.图标:悬停{过滤器:无；-webkit-filter:灰度(0%)；} & lt/style & gt；47.图片自适应object-fit当图片比例不固定时，一般使用background-size:cover/contain使图片自适应，但这只适用于背景图片。css3中可以使用object-fit属性来解决图片被拉伸或缩放的问题。使用前提:图片的父容器要宽要高。

img{宽度:100%；身高:100%；对象适合:封面；}fill:默认值。内容拉伸填充整个内容框，不保证保持原来的比例。包含:保持原来的大小比例。长边的长度和高度与容器大小相同，短边按比例缩放，可能会有空格。封面:保持原尺寸比例。宽度和高度的短边与容器大小相同，长边按比例缩放。某些区域可能不可见。(普通)无:保持原始大小比例。同时保持替换内容原始大小。缩小:保持原来的大小比例。如果容器尺寸大于图片的内容尺寸，则保持图片的原始尺寸，不放大失真；容器的大小小于图片内容的大小，用法与contain相同。

48、行内标签元素出现间隙问题

方法1:父字体大小设置为0。

。父亲{ font-size:0；}方法2:将父元素的单词间距值设置为适当的负值。

。父亲{ word-spacing:-2px}其他方案:1。将行中元素写成一行(影响阅读)；2使用浮动样式(会影响布局)。

49、解决vertical-align属性不生效

使用vertical-align:middle实现垂直居中时，经常会发现并不生效。这里我们需要注意它生效需要满足的条件:

操作环境:父元素设置行高。需要和身高一致。或者将显示属性设置为table-cell，将块元素转换为单元格。代理对象:子元素中的内联块和内联元素。

<div class="box"> <img src=".\\test.jpg"/> <span>内部文字</span></div><style>.box{ width:300px; line-height: 300px; font-size: 16px; }.box img{ width: 30px; height:30px; vertical-align:middle}.box span{ vertical-align:middle}</style>

PS：vertical-align不可继承，必须对子元素单独设置。同时需要注意的是line-height的高度基于font-size（即字体的高度），如果文字要转行会出现异常哦。& ltdiv class = & # 34方框& # 34；& gt& ltimg src = & # 34。\\ test.jpg & # 34/& gt；& ltspan & gt内部文本