CSS 样式清单整理（二）

时间 2021-07-23

标签 css html 前端 css3 web api 浏览器 dom 编辑器函数栏目 CSS 繁體版

原文原文链接

1六、元素占满整个屏幕

heigth若是使用100%，会根据父级的高度来决定，因此使用100vh单位。css

.dom{
  width:100%;
  height:100vh;
}

1七、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;
}

1八、实现文字竖向排版

// 单列展现时
.wrap {
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
    word-wrap: break-word;/*英文的时候须要加上这句，自动换行*/ 
}
// 多列展现时
.wrap {
    height: 210px;
    line-height: 30px;
    text-align: justify;
    writing-mode: vertical-lr;  //从左向右    
    writing-mode: tb-lr;        //IE从左向右
    //writing-mode: vertical-rl;  -- 从右向左
    //writing-mode: tb-rl;        -- 从右向左
}

1九、使元素鼠标事件失效

.wrap {
  // 若是按tab能选中该元素，如button，而后按回车仍是能执行对应的事件，如click。
 pointer-events: none;
 cursor: default;
}

20、禁止用户选择

.wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

2一、使用硬件加速

在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提高性能。硬件加速在移动端尤为有用，由于它能够有效的减小资源的利用。
目前主流浏览器会检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。若是不使用3D变形，咱们能够经过下面方式来开启：html

.wrap {
    transform: translateZ(0);
}

2二、页面动画出现闪烁问题

在 Chrome and Safari中，当咱们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码能够修复此状况：前端

.cube {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

在webkit内核的浏览器中，另外一个行之有效的方法是css3

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

2三、字母大小写转换

p {text-transform: uppercase}  // 将全部字母变成大写字母
p {text-transform: lowercase}  // 将全部字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps}   // 将字体变成小型的大写字母

2四、将一个容器设为透明

.wrap { 
  filter:alpha(opacity=50); 
  -moz-opacity:0.5; 
  -khtml-opacity: 0.5; 
  opacity: 0.5; 
}

2五、消除transition闪屏

.wrap {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

2六、识别字符串里的 '\n' 并换行

通常在富文本中返回换行符不是<br>的标签，并且\n。不使用正则转换的状况下，可经过下面样式实现换行。web

body {
   white-space: pre-line;
}

2七、移除a标签被点连接的边框

a {
  outline: none；//或者outline: 0
  text-decoration:none; //取消默认下划线
}

2八、CSS显示连接以后的URL

<a href="//www.webqdkf.com">有课前端网</a>
<style>
a:after {content: " (" attr(href) ")";}
</style>

2九、select内容居中显示、下拉内容右对齐

select{
    text-align: center;
    text-align-last: center;
}
select option {
    direction: rtl;
}

30、修改input输入框中光标的颜色不改变字体的颜色

input{
    color:  #fff;
    caret-color: red;
}

3一、子元素固定宽度父元素宽度被撑开

// 父元素下的子元素是行内元素
.wrap {
  white-space: nowrap;
}
// 若父元素下的子元素是块级元素
.wrap {
  white-space: nowrap;  // 子元素不被换行
  display: inline-block;
}

3二、让div里的图片和文字同时上下居中

这里不使用flex布局的状况。经过vertival-alignapi

.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;

3三、实现宽高等比例自适应矩形

.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>

3四、transfrom的rotate属性在span标签下失效

span {
  display: inline-block
}

3五、CSS加载动画

主要是经过css旋转动画的实现：浏览器

.dom{
  -webkit-animation:circle 1s infinite linear;
}
@keyframes circle{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

3六、文字渐变效果实现

<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>

3七、好看的边框阴影

<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>

3八、好看的背景渐变

<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>

3九、实现立体字的效果

<div class="text_solid">世界那么大我想去看看</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;
}

4一、实现文字描边的2种方法

方式一：dom

.stroke {
      -webkit-text-stroke: 1px greenyellow;
     text-stroke: 1px greenyellow;
}

方式二：编辑器

.stroke {
  text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
  *filter: Glow(color=#000, strength=1);
}

4二、元素透明度的实现

.dom{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

4三、解决1px边框变粗问题

.dom{
  height: 1px;
  background: #dbdbdb;
  transform:scaleY(0.5);
}

Ps：出现1px变粗的缘由，好比在2倍屏时1px的像素实际对应2个物理像素。函数

4三、解决1px边框变粗问题

.dom{
  height: 1px;
  background: #dbdbdb;
  transform:scaleY(0.5);
}

Ps：出现1px变粗的缘由，好比在2倍屏时1px的像素实际对应2个物理像素。

4四、CSS不一样单位的运算

css本身也可以进行简单的运算，主要是用到了calc这个函数。实现不一样单位的加减运算：

.div{ 
   width: calc(100% - 50px); 
}

4五、CSS实现文字模糊效果

.vague_text{
  color: transparent; 
  text-shadow: #111 0 0 5px;
}

4六、经过滤镜让图标变灰

一张彩色的图片就能实现鼠标移入变彩色，移出变灰的效果

<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>

4七、图片自适应object-fit

当图片比例不固定时，想要让图片自适应，通常都会用background-size:cover/contain，可是这个只适用于背景图。css3中可以使用object-fit属性来解决图片被拉伸或是被缩放的问题。使用的提早条件：图片的父级容器要有宽高。

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

fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。（经常使用）none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。scale-down:保持原有尺寸比例,若是容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain同样。

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

方式一：父级font-size设置为0

.father{
 font-size:0;
}

方式二：父元素上设置word-spacing的值为合适的负值

.father{
   word-spacing:-2px
}

其它方案：1将行内元素写为1行(影响阅读)；2使用浮动样式（会影响布局）。

4九、解决vertical-align属性不生效

在使用vertical-align:middle实现垂直居中的时候，常常会发现不生效的状况。这里须要注意它生效须要知足的条件：

**做用环境：**父元素设置line-height。须要和height一致。或者将display属性设置为table-cell，将块元素转化为单元格。
**做用对象：**子元素中的inline-block和inline元素。
<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（即字体的高度），若是文字要转行会出现异常哦。

CSS 样式清单整理（二）

1六、元素占满整个屏幕

1七、CSS实现文本两端对齐

1八、实现文字竖向排版

1九、使元素鼠标事件失效

20、禁止用户选择

2一、使用硬件加速

2二、页面动画出现闪烁问题

2三、字母大小写转换

2四、将一个容器设为透明

2五、消除transition闪屏

2六、识别字符串里的 '\n' 并换行

2七、移除a标签被点连接的边框

2八、CSS显示连接以后的URL

2九、select内容居中显示、下拉内容右对齐

30、修改input输入框中光标的颜色不改变字体的颜色

3一、子元素固定宽度 父元素宽度被撑开

3二、让div里的图片和文字同时上下居中

3三、实现宽高等比例自适应矩形

3四、transfrom的rotate属性在span标签下失效

3五、CSS加载动画

3六、文字渐变效果实现

3七、好看的边框阴影

3八、好看的背景渐变

3九、实现立体字的效果

40、全屏背景图片的实现

4一、实现文字描边的2种方法

4二、元素透明度的实现

4三、解决1px边框变粗问题

4三、解决1px边框变粗问题

4四、CSS不一样单位的运算

4五、CSS实现文字模糊效果

4六、经过滤镜让图标变灰

4七、图片自适应object-fit

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

4九、解决vertical-align属性不生效

3一、子元素固定宽度父元素宽度被撑开