资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/css整理

css整理

Miracle_lihb / 1931人阅读

摘要：移动端屏幕图片模糊图标是设备是的屏，那么你得准备一个，分辨率是，这么写这个也很关键设置倍图为倍图大小或者上面的代码，就能实现在屏幕密度为的情况下加载屏幕密度为时加载。

移动端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倍图大小
  }
//或者

//上面的代码，就能实现在屏幕密度为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: value9; /* 所有IE浏览器 */ 
    property: value; /* IE8 */ 
    +property: value; /* IE7 */ 
    _property: value; /* IE6 */ 
    *property: value; /* IE6-7 */ 
}
使用ie最高版本内核渲染 

//或者
兼容ie6的圆角 

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

.double {
    border-bottom: 20px solid blue;
    border-top: 60px double red;
    height: 20px;
    width: 120px;
}
border-color继承color的颜色 

/*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;
}
超融合服务器 混合云 机柜整理 整理收集 整理资料 颜色整理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116575.html

相关文章

  • 纯 CSS3 效果资源收集整理

    摘要：纯，不使用，能实现怎样的视觉效果这里收集整理了一些相关资源与工具，欢迎各位补充。出品的纯框架，体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合，完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML，不使用 JavaScript，能实现怎样的视觉效果? 这里收集整理...

    fancyLuo 评论0 收藏0

  • 纯 CSS3 效果资源收集整理

    摘要：纯，不使用，能实现怎样的视觉效果这里收集整理了一些相关资源与工具，欢迎各位补充。出品的纯框架，体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合，完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML，不使用 JavaScript，能实现怎样的视觉效果? 这里收集整理...

    zhaofeihao 评论0 收藏0

  • 前端学习资源整理

    稍微整理了一下自己平时看到的前端学习资源，分享给大家。 html MDN：Mozilla开发者网络 SEO：前端开发中的SEO css 张鑫旭：张鑫旭的博客 css精灵图：css精灵图实践 栅格系统：详解CSS中的栅格系统 媒体查询：css媒体查询用法 rem布局：手机端页面自适应布局 移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局：手机淘宝移动端布局 fl...

    siberiawolf 评论0 收藏0

  • CSS基础知识点整理

    摘要：忙忙碌碌的，没空整理。最近遇到些相关问题，之前只是印象中要这么用，不知道之所以然，今天就大概的整理下会比较零散。首先，巧妙的使用这一标记，将浏览器从所有情况中分离出来。接着，再次使用将和分离开来，这样已经独立识别。 忙忙碌碌的，没空整理。最近遇到些CSS相关问题，之前只是印象中要这么用，不知道之所以然，今天就大概的整理下（会比较零散）。 盒子模型 W3C标准/IE盒子模型 标准盒子模型...

    HollisChuang 评论0 收藏0

发表评论

登陆后可评论

0条评论

Miracle_lihb

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<