css整理

2019年9月14日 159次阅读 来源: sgosky

移动端Retina屏幕图片模糊

//图标icon.png是16x16, 设备是2x的Retina屏，那么你得准备一个icon@2x.png，分辨率是32x32，这么写
.demo{
  background-image: url(images/icon.png);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2) {
  .demo {
    background-image: url(images/icon@2x.png);
    background-size: 16px 16px; //这个也很关键--设置2倍图为1倍图大小
  }
//或者
<img src="image-128.png" srcset="image-256.png 2x" />
//上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

让图文不可复制

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

去除苹果手机自带样式

/*强制去除表单自带的样式*/ 
input,button,select,textarea{outline:none;-webkit-appearance:none;}

/*强制去除textarea自带的样式*/
textarea{resize:none;-webkit-appearance:none;}

清除浮动，兼容ie6

.clearfix{
  zoom: 1;
}
.clearfix:after{
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

垂直水平居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

内容垂直居中

.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

CSS3全屏背景

html { 
    background: url('images/bg.jpg') no-repeat center center fixed; 
    background-size: cover;
}

ie hack

selector { 
    property: value; /* 所有浏览器 */ 
    property: value\9; /* 所有IE浏览器 */ 
    property: value\0; /* IE8 */ 
    +property: value; /* IE7 */ 
    _property: value; /* IE6 */ 
    *property: value; /* IE6-7 */ 
}

使用ie最高版本内核渲染

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
//或者
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9">

兼容ie6的圆角

《css整理》

.t{
    width: 200px;
    border:3px solid;
    border-color: transparent transparent green;
}
.tcon{
    width: 206px;
    height: 50px;
    background-color: green;
}
.tb{
    width: 200px;
    border:3px solid;
    border-color: green transparent transparent;
}

<div class="tbox">
    <div class="t"></div>
    <div class="tcon"></div>
    <div class="tb"></div>
</div>

css省略号

//单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
//宽度不固定 多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

自定义文本选中样式

// 只能修改这两个属性 字体颜色 选中背景颜色
element::selection{
  color: green;
  background-color: pink;
}
element::-moz-selection{
  color: green;
  background-color: pink;
}

小三角

.triangle{
  /* 基础样式 */
  border:solid 10px transparent;
}
/*下*/
.triangle.bottom{
 border-top-color: green;
}
/*上*/
.triangle.top{
 border-bottom-color: green;
}
/*左*/
.triangle.top{
 border-right-color: green;
}
/*右*/
.triangle.top{
 border-left-color: green;
}

鼠标手型

//一般情况下，我们希望在以下元素身上添加鼠标手型
a[href],
input[type='submit'],
input[type='image'],
input[type='button'],
label[for], 
select, 
button {
  cursor: pointer;
}

论文页面的卷曲效果

ul.box {
    position: relative;
    z-index: 1; /* prevent shadows falling behind containers with backgrounds */
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; 
}
ul.box li {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 30px 30px 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}
ul.box li:before,
ul.box li:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); 
}
ul.box li:after {
    left: auto;
    right: 10px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    -ms-transform: skew(15deg) rotate(6deg);
    -o-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg); 
}

double

《css整理》

.double {
    border-bottom: 20px solid blue;
    border-top: 60px double red;
    height: 20px;
    width: 120px;
}

border-color继承color的颜色

《css整理》

/*border-color继承color的颜色*/
.add{
    display: block;
    width: 200px;
    height: 200px;
    position: relative;
    transition: color .5s .1s;

    color: #ccc;
    border: 1px solid;
}
.add:before{
    content: '';
    border-top:10px solid;
    width: 90%;
    position: absolute;
    left: 5%;
    top: 95px;
}
.add:after{
    content: '';
    border-left:10px solid;
    height: 90%;
    position: absolute;
    left: 95px;
    top: 5%;
}
.add:hover{
    color:#f60;//一行实现颜色变化
}

移动端可点击元素去处默认边框

-webkit-tap-highlight-color: rgba(255,255,255,0);

屏蔽Webkit移动浏览器中元素高亮效果

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

给 “默认” 链接定义样式：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

逗号分隔列表

ul > li:not(:last-child)::after {
  content: ",";
}

使用负的 nth-child 可以选择 1 至 n 个元素。

li {
  display: none;
}
/* 选择第 1 至第 3 个元素并显示出来 */
li:nth-child(-n+3) {
  display: block;
}

//或者

/* 选择第 1 至第 3 个元素并显示出来 */
li:not(:nth-child(-n+3)) {
  display: none;
}

利用属性选择器来选择空链接

a[href^="http"]:empty::before { 
    content: attr(href); 
}

设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为

/* 禁止长按链接与图片弹出菜单 */
a, img { -webkit-touch-callout: none; } 

/* 禁止选中文本（如无文本选中需求，此为必选项）*/
html, body { 
-webkit-user-select: none;  
user-select: none; 
}

改变placeholder的字体颜色大小

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

美化input框

/*在IE10+浏览器中, 使用css即可隐藏input文本输入框右侧的叉号*/
input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{
  /*去除点击出现轮廓颜色*/
  outline: none;
  /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/    
}

美化select

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #333;

  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("小箭头图片路径") no-repeat right center transparent;

  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;

  /*去除点击出现轮廓颜色*/
  outline: none;
}
    原文作者：sgosky
    原文地址: https://segmentfault.com/a/1190000008615592
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞